webpack 中 import css 文件报错: Module build failed...

摘要:项目中引入了css文件,配置了 rules 中:在执行 webpack 命令时,发生错误,报错信息:Module build failed (from ./node_modules/css-loader/dist/cjs.js):CssSyntaxError,经查询,是loader顺序不正确导致此问题,修改后如下:

项目中引入了css文件,配置了 rules 中:

{
    test: /\\.css$/,
    use: ['css-loader', 'style-loader']
}

在执行 webpack 命令时,发生错误,报错信息:

Module build failed (from ./node_modules/css-loader/dist/cjs.js):CssSyntaxError

经查询,是loader顺序不正确导致此问题,修改后如下:

{
    test: /\\.css$/,
    use: ['style-loader', 'css-loader']
}

问题解决。

问题溯源: 根本原因是,webpack 调用 loader 是从右向左在调用的。

Loaders can be chained by passing multiple loaders, which will be applied from right to left (last to first configured).

原文见: https://webpack.js.org/configuration/module/#ruleuse

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_7442