项目中引入了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://fly63.com/article/detial/7442