css-loader导致vue中样式失效

问题描述

vue文件中的样式失效

环境

• css-loader: 5.0.1
• vue-style-loader：4.1.2

原因

css-loader4.0后默认对esModule设置的是true

vue-style-loader 4.1.2默认接收的是commonjs的结果，也就是默认接收的是“css-loader中esModule设置的是false的结果”，所以一个配置的是true，一个接收的是false，最终就不会显示样式了。

解决

1. 在项目的vue.config.js中对css的esModule改成false

module.exports = {
	...
    css: {
    	...
        esModule: false
    }
    ...
}

2. 修改webpack的配置文件，css-loader模块设置添加esModule: false

module: {
  rules: [
    {
      test: /\.css$/i, 
      use: [
        {
          loader: 'css-loader', 
          options: { esModule: false } // 添加这个
        }
      ]
    }
  ]
}

参考

css-loader导致vue中样式失效（坑坑坑！！）