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

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

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


1.在看到这个问题以后,我第一时间去 reset.css 中查看语法是否有误;结果是没有任何错误。

2.在确定 css 文件无误以后,我把配置规则中的 css-loader 配置移除,只保留 style-loader,发现可以正常运行;这就说明是 css-loader 的问题。

3.我将上述报错信息复制到必应,大部分人告诉我要降低 css-loader 版本;我试图通过改变版本来解决问题,然并卵……(这个过程我持续了很久)

4.直到我用谷歌搜到 Stack Overflow 上的答案:


9.jpg


看第一句,这位大佬告诉我们:报错的根本原因在于 css 文件在编译时被 css-loader 加载了不止一次……

5.这时,我才恍然大悟。我发现我运行命令用的是 webpack.config.js 里的配置,其中已经将通用配置和对应环境的配置合并在一起了。而我在不同的环境下又合并了一遍,导致 css-loader 重复处理了 css 文件,导致报错。

6.这次经历再一次告诉我一个道理:前端报错,请第一时间通过谷歌 + StackOverflow来解决问题。


目录
相关文章
|
3月前
|
前端开发 数据安全/隐私保护
Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:
Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:
|
27天前
error in ./node_modules/@intlify/core-base/dist/core-base.cjs
error in ./node_modules/@intlify/core-base/dist/core-base.cjs
51 2
|
30天前
Electron——node_modules\ffi-napi\build\Release\ffi_bindings.node is not a valid Win32 application.
Electron——node_modules\ffi-napi\build\Release\ffi_bindings.node is not a valid Win32 application.
29 0
|
30天前
NPM——Electron failed to install correctly, please delete node_modules/electron and try
NPM——Electron failed to install correctly, please delete node_modules/electron and try
72 0
|
2月前
|
JavaScript
若依修改,This relative module was not found:* ./@/assets/logo/logo.png in ./node_modules/css-loader/dist
若依修改,This relative module was not found:* ./@/assets/logo/logo.png in ./node_modules/css-loader/dist
若依修改,This relative module was not found:* ./@/assets/logo/logo.png in ./node_modules/css-loader/dist
|
3月前
Error: Cannot find module ‘node:url‘【已解决】
Error: Cannot find module ‘node:url‘【已解决】
115 3
Get “https://npm.taobao.org/mirrors/node/latest/SHASUMS256.txt“: tls: failed to verify certificate:
Get “https://npm.taobao.org/mirrors/node/latest/SHASUMS256.txt“: tls: failed to verify certificate:
|
2月前
|
开发工具 git
vscode设置 git提交代码忽略node_modules,dist,vscode如何设置不提交node_modules,dist
vscode设置 git提交代码忽略node_modules,dist,vscode如何设置不提交node_modules,dist
162 0
|
3月前
|
运维 JavaScript Devops
阿里云云效操作报错合集之node.js构建时,报错:The build failed because the process exited too early.该怎么办
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
4月前
|
资源调度 JavaScript 内存技术
error @achrinza/node-ipc@9.2.2: The engine “node“ is incompatible with this module. Expected version
error @achrinza/node-ipc@9.2.2: The engine “node“ is incompatible with this module. Expected version
365 0