CSS相关

Vue CLI项目天生支持 PostCSS，CSS模块 和包含 Sass，Less，Stylus 内部的前置器。

引用静态资源

所有编译后的CSS都会通过cs -loader 来解析其中的url（）引用，将这些引用作为模块请求来处理。这意味着您可以根据本地的文件结构用相对路径来引用静态资源。

另外要注意的是如果您想要引用一个npm依赖中的文件，或者想要使用webpack别名，则需要在路径前加上〜的替换来避免歧义。

预处理器

如果当时没有选好，内置的webpack仍然会被预配置为可以完成所有的处理。您也可以手动安装相应的webpack loader：

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

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

<style lang="scss">
$color: red;
</style>

自动化引入

如果您想自动化导入文件（用于颜色，变量，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模块

您可以通过<style module>以开箱即用的方式在* .vue文件中使用CSS模块。

如果想在JavaScript中作为CSS模块引入CSS或其他预处理文件，该文件应该以.module。（css | less | ass | scss | styl）结尾：

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

如果你想去掉文件名中的.module，可以设置vue.config.js中的css.requireModuleExtension为false：

// vue.config.js
module.exports = {
  css: {
    requireModuleExtension: false
  }
}

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

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 注意：以下配置在 Vue CLI v4 与 v3 之间存在差异。
        // Vue CLI v3 用户可参考 css-loader v1 文档
        // https://github.com/webpack-contrib/css-loader/tree/v1.0.1
        modules: {
          localIdentName: '[name]-[hash]'
        },
        localsConvention: 'camelCaseOnly'
      }
    }
  }
}

向预器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'
        }
      }
    }
  }
}

加载程序可以通过loaderOptions配置，包括：

• CSS加载器
• 后加载器
• 萨斯装载机
• 较少装载机
• 测针器

提示

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