CSS 相关
Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。
引用静态资源
所有编译后的 CSS 都会通过 css-loader 来解析其中的 url()
引用,并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件,或是想要用 webpack alias,则需要在路径前加上 ~
的前缀来避免歧义。更多细节请参考处理静态资源。
预处理器
你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader:
# Sass
npm install -D sass-loader sass
# Less
npm install -D less-loader less
# Stylus
npm install -D stylus-loader stylus
然后你就可以导入相应的文件类型,或在 *.vue
文件中这样来使用:
<style lang="scss">
$color: red;
</style>
Sass 性能贴士
请注意,当使用 Dart 版本的 Sass 时,默认情况下,同步编译的速度为异步编译速度的两倍,这是由于异步回调造成的性能开销。为避免此开销,你可以使用 fibers 的 package 在异步环境下使用同步的代码。要启用此功能,只需安装 fibers
到项目依赖:
npm install -D fibers
另外请注意,由于这是一个原生模块,因此 OS 与构建环境之间可能存在兼容问题。如果遇到此问题,请执行 npm uninstall -D fibers
来解决此问题。
自动化导入
如果你想自动化导入文件 (用于颜色、变量、mixin……),你可以使用 style-resources-loader。这里有一个关于 Stylus 的在每个单文件组件和 Stylus 文件中导入 ./src/styles/imports.styl
的例子:
// vue.config.js
const path = require('path')
module.exports = {
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
},
}
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/styles/imports.styl'),
],
})
}
你也可以选择使用 vue-cli-plugin-style-resources-loader。
PostCSS
Vue CLI 内部使用了 PostCSS。
你可以通过 .postcssrc
或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js
中的 css.loaderOptions.postcss
配置 postcss-loader。
我们默认开启了 autoprefixer。如果要配置目标浏览器,可使用 package.json
的 browserslist 字段。
关于 CSS 中浏览器前缀规则的注意事项
在生产环境构建中,Vue CLI 会优化 CSS 并基于目标浏览器抛弃不必要的浏览器前缀规则。因为默认开启了 autoprefixer
,你只使用无前缀的 CSS 规则即可。
CSS Modules
你可以通过 <style module>
以开箱即用的方式在 *.vue
文件中使用 CSS Modules。
如果想在 JavaScript 中作为 CSS Modules 导入 CSS 或其它预处理文件,该文件应该以 .module.(css|less|sass|scss|styl)
结尾:
import styles from './foo.module.css'
// 所有支持的预处理器都一样工作
import sassStyles from './foo.module.scss'
如果你想去掉文件名中的 .module
,可以设置 vue.config.js
中的 css.modules
为 true
:
// vue.config.js
module.exports = {
css: {
modules: true
}
}
如果你希望自定义生成的 CSS Modules 模块的类名,可以通过 vue.config.js
中的 css.loaderOptions.css
选项来实现。所有的 css-loader
选项在这里都是支持的,例如 localIdentName
和 camelCase
:
// vue.config.js
module.exports = {
css: {
loaderOptions: {
css: {
localIdentName: '[name]-[hash]',
camelCase: 'only'
}
}
}
}
向预处理器 Loader 传递选项
有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js
中的 css.loaderOptions
选项。比如你可以这样向所有 Sass/Less 样式传入共享的全局变量:
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.sass` 这个文件
// 注意:在 sass-loader v7 中,这个选项名是 "data"
prependData: `@import "~@/variables.sass"`
},
// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
// 因为 `scss` 语法在内部也是由 sass-loader 处理的
// 但是在配置 `data` 选项的时候
// `scss` 语法会要求语句结尾必须有分号,`sass` 则要求必须没有分号
// 在这种情况下,我们可以使用 `scss` 选项,对 `scss` 语法进行单独配置
scss: {
prependData: `@import "~@/variables.scss";`
},
// 给 less-loader 传递 Less.js 相关选项
less:{
// http://lesscss.org/usage/#less-options-strict-units `Global Variables`
// `primary` is global variables fields name
globalVars: {
primary: '#fff'
}
}
}
}
}
Loader 可以通过 loaderOptions
配置,包括:
提示
这样做比使用 chainWebpack
手动指定 loader 更推荐,因为这些选项需要应用在使用了相应 loader 的多个地方。
← HTML 和静态资源 webpack 相关 →