预处理器
此样板预置了最流行 CSS 预处理器包括 LESS、SASS、Stylus 和 PostCSS。 要使用一个预处理器,你仅需要为其安装适当的加载器。例如,使用 SASS:
npm install sass-loader node-sass --save-dev
注意你也需要安装 node-sass
,因为它是 sass-loader
的一个依赖项。
组件内使用预处理器
一旦安装完,你就能在 *.vue
组件内使用预处理,通过设置 <style>
标签上的 lang
属性:
<style lang="scss">
/* 写 SASS! */
</style>
SASS 语法的一个注意项
lang="scss"
对应于 CSS 语法 (使用大括号和分号)。lang="sass"
对应于基于缩进式的语法。
PostCSS
*.vue
文件内的样式默认通过 PostCSS 处理,所以你无需为它指定加载器。你只需简单地把 PostCSS 插件添加在 build/webpack.base.conf.js
文件中的 vue
块内:
// build/webpack.base.conf.js
module.exports = {
// ...
vue: {
postcss: [/* your plugins */]
}
}
查看 vue-loader 相关文档 获得更多细节。
单独 CSS 文件
为确保一致的处理,建议在根组件 App.vue
内导入一个全局的独立样式 CSS 文件,例如:
<!-- App.vue -->
<style src="./styles/global.less" lang="less"></style>
注意你只要加载你自己写的样式就行。对于现有的库,如 Bootstrap 或 Semantic UI,可以把它们放在 /static
目录下,并在 index.html
文件中直接引用它们就行。这样避免了额外的构建时间浪费,并且也更好地支持浏览器的缓存。(查看 静态资源处理 获得更多细节)