预处理器

该模板已经预先配置好了最流行的几个css预处理器，包括LESS, SASS, Stylus, 和 PostCSS。使用时只需要安装相应的webpack loader就可以了。例如，如果使用SASS的话：

npm install sass-loader node-sass --save-dev

注意你还需要安装node-sass，因为sass-loader是依赖于它的。

在组件中使用预处理器

安装了之后，你就可以在*.vue的组件中使用预处理器了，在<style> 标签上添加lang属性：

<style lang="scss">
/* write SASS! */
</style>

SASS 语法提示

  • lang="scss" 对应的是CSS-超集语法（带有花括号和分号）
  • lang="sass" 对应的是基于缩进的语法.

PostCSS

*.vue文件中的样式默认都是经过PostCSS处理的，所以你不需要再用专门的loader了。直接在build/webpack.base.conf.js文件的vue块下面添加PostCSS插件就可以了：

// build/webpack.base.conf.js
module.exports = {
  // ...
  vue: {
    postcss: [/* your plugins */]
  }
}

查看 vue-loader的相关文档 获取更多细节。

单独的 CSS 文件

为了确保一致的抽取和处理，强烈建议在根组件App.vue里引用全局的单独的样式文件。例如：

<!-- App.vue -->
<style src="./styles/global.less" lang="less"></style>

注意这种引用方法应该只适用于那些你自己写的样式文件。对于已经存在的库文件，例如Bootstrap或者Semantic UI这种，你可以放在 /static文件夹下，然后直接在index.html里引用它们。这样避免额外的构建时间，并且对于浏览器缓存来说会更好一些。(查看 静态资源处理)

results matching ""

    No results matching ""