webpack使用css-loader跟style-loader加载css报错

webpack使用css-loader跟style-loader加载css报错

ERROR in .***.css
Module build failed (from ./node_modules/css-loader/index.js):
Unknown word (2:1)

  1 |
> 2 | var content = require("!!./***s.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];
  5 |

webpack.config.js 配置

// 简单配置
module: {
	rules: [
		{
			test: /\.css$/,
			// 错误的配置
			use: ['css-loader', 'style-loader']
			// 正确的配置(顺序变换)
			use: ['style-loader', 'css-loader']
		}
	]
}

原因

根据webpack的ruls里配置，css会经过两个loader的处理，loader的处理是链式的从右向左，优先应使用css-loader去加载.css样式文件，后由style-loader生成<style>加入到页面中

• 官方解释：loader的特性
• css-loader 加载.css文件
• style-loader 使用<style>将css-loader内部样式注入到页面中