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

最新推荐文章于 2022-06-27 09:54:40 发布

weixin_30920513

最新推荐文章于 2022-06-27 09:54:40 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wisewrong/p/11553845.html

本文解决Vue-Cli3.x项目中autoprefixer未对main.js导入CSS自动加前缀的问题。通过在vue.config.js中添加CSS规则，确保所有CSS文件正确处理。

问题描述：

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

转载于:https://www.cnblogs.com/wisewrong/p/11553845.html