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 进行处理

 

你可能感兴趣的:(Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer)