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

最新推荐文章于 2024-08-19 17:49:51 发布

「已注销」

最新推荐文章于 2024-08-19 17:49:51 发布

阅读量1.6k

点赞数 1

分类专栏：爬坑记录学习笔记文章标签： javascript css webpack 前端开发语言

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_41990299/article/details/130723326

版权

学习笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

记录配置 Webpack 时遇到的一个百思不得其解的报错：Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError

在看到这个问题以后，我第一时间去 reset.css 中查看语法是否有误；结果是没有任何错误。
在确定 css 文件无误以后，我把配置规则中的 css-loader 配置移除，只保留 style-loader，发现可以正常运行；这就说明是 css-loader 的问题。
我将上述报错信息复制到必应，大部分人告诉我要降低 css-loader 版本；我试图通过改变版本来解决问题，然并卵……(这个过程我持续了很久)
直到我用谷歌搜到 Stack Overflow 上的答案：看第一句，这位大佬告诉我们：报错的根本原因在于 css 文件在编译时被 css-loader 加载了不止一次……
这时，我才恍然大悟。我发现我运行命令用的是 webpack.config.js 里的配置，其中已经将通用配置和对应环境的配置合并在一起了。而我在不同的环境下又合并了一遍，导致 css-loader 重复处理了 css 文件，导致报错。
这次经历再一次告诉我一个道理：前端报错，请第一时间通过谷歌 + StackOverflow来解决问题。

参考：https://stackoverflow.com/questions/64952866/module-build-failed-from-node-modules-css-loader-dist-cjs-js-csssyntaxerror

添加我的微信：enjoyMrcat，共同成长，卷卷群里等你 🤪。

以上，感谢您的阅读～

「已注销」

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

「已注销」 CSDN认证博客专家 CSDN认证企业博客

码龄6年

70: 原创

-: 周排名

-: 总排名

2万+: 访问

: 等级

934: 积分

165: 粉丝

150: 获赞

4: 评论

195: 收藏

私信

关注

热门文章

分类专栏

最新评论

Webpack5 系列（四）：Babel 的配置
CSDN-Ada助手: 一定要坚持创作更多高质量博客哦, 小小红包, 以资鼓励, 更多创作活动请看: 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 上传ChatGPT/计算机论文等资源，瓜分￥5000元现金: https://blog.csdn.net/VIP_Assistant/article/details/130196121?utm_source=csdn_ai_ada_redpacket 新人首创任务挑战赛: https://marketing.csdn.net/p/90a06697f3eae83aabea1e150f5be8a5?utm_source=csdn_ai_ada_redpacket Microsoft Edge功能测评！: https://activity.csdn.net/creatActivity?id=10403?utm_source=csdn_ai_ada_redpacket 生物识别技术能否成为应对安全挑战的绝佳选择？: https://activity.csdn.net/creatActivity?id=10411?utm_source=csdn_ai_ada_redpacket 应届生如何提高职场竞争力: https://activity.csdn.net/creatActivity?id=10409?utm_source=csdn_ai_ada_redpacket 讯飞星火大模型将超越chatgpt？: https://activity.csdn.net/creatActivity?id=10407?utm_source=csdn_ai_ada_redpacket 职场新人备忘录: https://activity.csdn.net/creatActivity?id=10405?utm_source=csdn_ai_ada_redpacket VR vs AR：哪种技术更有潜力改变未来？: https://activity.csdn.net/creatActivity?id=10399?utm_source=csdn_ai_ada_redpacket “裸奔”时代下该如何保护网络隐私: https://activity.csdn.net/creatActivity?id=10401?utm_source=csdn_ai_ada_redpacket 蓝桥杯备赛指南分享: https://activity.csdn.net/creatActivity?id=10317?utm_source=csdn_ai_ada_redpacket 有哪些工具软件是一旦用了就离不开的？: https://activity.csdn.net/creatActivity?id=10397?utm_source=csdn_ai_ada_redpacket 量子计算：下一个大风口，还是一个热炒概念？: https://activity.csdn.net/creatActivity?id=10395?utm_source=csdn_ai_ada_redpacket
Flow 学习笔记
CSDN-Ada助手: 一定要坚持创作更多高质量博客哦, 小小红包, 以资鼓励, 更多创作活动请看: 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 上传ChatGPT/计算机论文等资源，瓜分￥5000元现金: https://blog.csdn.net/VIP_Assistant/article/details/130196121?utm_source=csdn_ai_ada_redpacket 新人首创任务挑战赛: https://marketing.csdn.net/p/90a06697f3eae83aabea1e150f5be8a5?utm_source=csdn_ai_ada_redpacket Microsoft Edge功能测评！: https://activity.csdn.net/creatActivity?id=10403?utm_source=csdn_ai_ada_redpacket 生物识别技术能否成为应对安全挑战的绝佳选择？: https://activity.csdn.net/creatActivity?id=10411?utm_source=csdn_ai_ada_redpacket 应届生如何提高职场竞争力: https://activity.csdn.net/creatActivity?id=10409?utm_source=csdn_ai_ada_redpacket 讯飞星火大模型将超越chatgpt？: https://activity.csdn.net/creatActivity?id=10407?utm_source=csdn_ai_ada_redpacket 职场新人备忘录: https://activity.csdn.net/creatActivity?id=10405?utm_source=csdn_ai_ada_redpacket VR vs AR：哪种技术更有潜力改变未来？: https://activity.csdn.net/creatActivity?id=10399?utm_source=csdn_ai_ada_redpacket “裸奔”时代下该如何保护网络隐私: https://activity.csdn.net/creatActivity?id=10401?utm_source=csdn_ai_ada_redpacket 蓝桥杯备赛指南分享: https://activity.csdn.net/creatActivity?id=10317?utm_source=csdn_ai_ada_redpacket 有哪些工具软件是一旦用了就离不开的？: https://activity.csdn.net/creatActivity?id=10397?utm_source=csdn_ai_ada_redpacket 量子计算：下一个大风口，还是一个热炒概念？: https://activity.csdn.net/creatActivity?id=10395?utm_source=csdn_ai_ada_redpacket
Canvas知识点梳理
CSDN-Ada助手: 一定要坚持创作更多高质量博客哦, 小小红包, 以资鼓励, 更多创作活动请看: 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 上传ChatGPT/计算机论文等资源，瓜分￥5000元现金: https://blog.csdn.net/VIP_Assistant/article/details/130196121?utm_source=csdn_ai_ada_redpacket 新人首创任务挑战赛: https://marketing.csdn.net/p/90a06697f3eae83aabea1e150f5be8a5?utm_source=csdn_ai_ada_redpacket Microsoft Edge功能测评！: https://activity.csdn.net/creatActivity?id=10403?utm_source=csdn_ai_ada_redpacket 生物识别技术能否成为应对安全挑战的绝佳选择？: https://activity.csdn.net/creatActivity?id=10411?utm_source=csdn_ai_ada_redpacket 应届生如何提高职场竞争力: https://activity.csdn.net/creatActivity?id=10409?utm_source=csdn_ai_ada_redpacket 讯飞星火大模型将超越chatgpt？: https://activity.csdn.net/creatActivity?id=10407?utm_source=csdn_ai_ada_redpacket 职场新人备忘录: https://activity.csdn.net/creatActivity?id=10405?utm_source=csdn_ai_ada_redpacket VR vs AR：哪种技术更有潜力改变未来？: https://activity.csdn.net/creatActivity?id=10399?utm_source=csdn_ai_ada_redpacket “裸奔”时代下该如何保护网络隐私: https://activity.csdn.net/creatActivity?id=10401?utm_source=csdn_ai_ada_redpacket 蓝桥杯备赛指南分享: https://activity.csdn.net/creatActivity?id=10317?utm_source=csdn_ai_ada_redpacket 有哪些工具软件是一旦用了就离不开的？: https://activity.csdn.net/creatActivity?id=10397?utm_source=csdn_ai_ada_redpacket 量子计算：下一个大风口，还是一个热炒概念？: https://activity.csdn.net/creatActivity?id=10395?utm_source=csdn_ai_ada_redpacket
亲测有效：解决Chrome浏览器跨域问题
·马克图布·: 没试
亲测有效：解决Chrome浏览器跨域问题
小伯言: 到底有用么

大家在看

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。