Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer

问题描述：

Vue-Cli 3.x 默认开启了 autoprefixer，但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀

 

分析原因：

autoprefixer 在项目编译的时候，会根据 loader 的规则编译相应的 CSS。Vue-Cli 创建的项目，默认只处理了 .vue 文件中的 CSS，对于直接 import 引入的样式，需要另外配置 loader 规则。

 

解决方案：

在 vue.config.js 中添加 CSS 规则：

module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
        importLoaders: 1,
      },
      less: {
        // 这里的选项会传递给 postcss-loader
        importLoaders: 1,
      }
    }
  }
};

importLoaders 代表的是针对 import 引入的文件，在 css-loader 前需要进行什么处理，1 代表使用 postcss 进行处理