CSS 相关

Vue CLI 项目天生支持 PostCSSCSS Modules 和包含 SassLessStylus 在内的预处理器。

引用静态资源

所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用,并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件,或是想要用 webpack alias,则需要在路径前加上 ~ 的前缀来避免歧义。更多细节请参考处理静态资源

预处理器

你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader:

  1. # Sass
  2. npm install -D sass-loader node-sass
  3. # Less
  4. npm install -D less-loader less
  5. # Stylus
  6. npm install -D stylus-loader stylus

然后你就可以导入相应的文件类型,或在 *.vue 文件中这样来使用:

  1. <style lang="scss">
  2. $color: red;
  3. </style>

自动化导入

如果你想自动化导入文件 (用于颜色、变量、mixin……),你可以使用 style-resources-loader。这里有一个关于 Stylus 的在每个单文件组件和 Stylus 文件中导入 ./src/styles/imports.styl 的例子:

  1. // vue.config.js
  2. const path = require('path')
  3. module.exports = {
  4. chainWebpack: config => {
  5. const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
  6. types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
  7. },
  8. }
  9. function addStyleResource (rule) {
  10. rule.use('style-resource')
  11. .loader('style-resources-loader')
  12. .options({
  13. patterns: [
  14. path.resolve(__dirname, './src/styles/imports.styl'),
  15. ],
  16. })
  17. }

你也可以选择使用 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.jsonbrowserslist 字段。

关于 CSS 中浏览器前缀规则的注意事项

在生产环境构建中,Vue CLI 会优化 CSS 并基于目标浏览器抛弃不必要的浏览器前缀规则。因为默认开启了 autoprefixer,你只使用无前缀的 CSS 规则即可。

CSS Modules

你可以通过 <style module> 以开箱即用的方式*.vue 文件中使用 CSS Modules

如果想在 JavaScript 中作为 CSS Modules 导入 CSS 或其它预处理文件,该文件应该以 .module.(css|less|sass|scss|styl) 结尾:

  1. import styles from './foo.module.css'
  2. // 所有支持的预处理器都一样工作
  3. import sassStyles from './foo.module.scss'

如果你想去掉文件名中的 .module,可以设置 vue.config.js 中的 css.modulestrue

  1. // vue.config.js
  2. module.exports = {
  3. css: {
  4. modules: true
  5. }
  6. }

如果你希望自定义生成的 CSS Modules 模块的类名,可以通过 vue.config.js 中的 css.loaderOptions.css 选项来实现。所有的 css-loader 选项在这里都是支持的,例如 localIdentNamecamelCase

  1. // vue.config.js
  2. module.exports = {
  3. css: {
  4. loaderOptions: {
  5. css: {
  6. localIdentName: '[name]-[hash]',
  7. camelCase: 'only'
  8. }
  9. }
  10. }
  11. }

向预处理器 Loader 传递选项

有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有 Sass 样式传入共享的全局变量:

  1. // vue.config.js
  2. module.exports = {
  3. css: {
  4. loaderOptions: {
  5. // 给 sass-loader 传递选项
  6. sass: {
  7. // @/ 是 src/ 的别名
  8. // 所以这里假设你有 `src/variables.scss` 这个文件
  9. data: `@import "@/variables.scss";`
  10. }
  11. }
  12. }
  13. }

Loader 可以通过 loaderOptions 配置,包括:

提示

这样做比使用 chainWebpack 手动指定 loader 更推荐,因为这些选项需要应用在使用了相应 loader 的多个地方。

原文: https://cli.vuejs.org/zh/guide/css.html