如何修复“模块构建失败(来自 ./node_modules/postcss-loader/src/index.js)”

Posted

技术标签:

【中文标题】如何修复“模块构建失败(来自 ./node_modules/postcss-loader/src/index.js)”【英文标题】:How to fix "Module build failed (from ./node_modules/postcss-loader/src/index.js)" 【发布时间】:2020-02-20 10:17:11 【问题描述】:

我正在执行ng serve,在生成块后编译失败。

同一个仓库在同事的机器上运行,版本相同如下:

节点版本:10.16.3 NPM 版本:6.9.0 @angular/cli: 7.3.9

也试过了:

使用 nodejs lts/Dubnium,遇到同样的错误。 在强制清理 npm 缓存后尝试npm i。 从系统中删除 node 和 npm 并重新安装所有内容。

执行的命令:ng serve

错误是:

ERROR in ./src/assets/css/style.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/assets/css/style.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'type' of undefined
    at /home/akashj/workspace/projects/frontEnd/src/assets/css/style.css:1999:3
    at stringifyNode (/home/akashj/workspace/projects/frontEnd/node_modules/postcss-value-parser/lib/stringify.js:2:19)
    at Function.stringify (/home/akashj/workspace/projects/frontEnd/node_modules/postcss-value-parser/lib/stringify.js:45:10)
    at Gradient.colorStops (/home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/hacks/gradient.js:505:26)
    at Gradient.oldWebkit (/home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/hacks/gradient.js:398:10)
    at Gradient.replace (/home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/hacks/gradient.js:91:30)
    at Gradient.add (/home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/value.js:148:20)
    at Gradient.add (/home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/hacks/gradient.js:572:35)
    at Gradient.process (/home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/prefixer.js:157:16)
    at /home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/processor.js:327:15
    at /home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:190:18
    at /home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:135:18
    at Rule.each (/home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:101:16)
    at Rule.walk (/home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:131:17)
    at /home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:148:24
    at Root.each (/home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:101:16)
    at Root.walk (/home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:131:17)
ℹ 「wdm」: Failed to compile.

对于ng serve的整个控制台输出:https://pastebin.com/maHX3pCC

【问题讨论】:

你能发布你的 style.css 文件的内容吗? @Isma,嘿,我找到了原因并解决了!当我回到家时,我将添加答案和原因。仅供参考:问题是由 CSS 声明中的额外逗号引起的:background-image: linear-gradient(to right, #973a95, #055faa, ); 点击可能对您有帮助的链接。 ***.com/a/67548425/11438030 【参考方案1】:

我解决了。该行上的 CSS(如下所示)在末尾有一个逗号,之后没有任何值。因此 postcss 会抛出错误。

background-image: linear-gradient(to right, #973a95, #055faa, );

删除了逗号,它按预期工作

background-image: linear-gradient(to right, #973a95, #055faa);

【讨论】:

在我的例子中,css 有一些内容似乎对 raw-css-loader 无效:/*# sourceMappingURL=style.css.map */。从 css 文件中删除它后,加载器已经工作了。这个角度 css 解析器需要改进并显示更好的消息。

以上是关于如何修复“模块构建失败(来自 ./node_modules/postcss-loader/src/index.js)”的主要内容,如果未能解决你的问题,请参考以下文章

如何修复漏洞

如何修复WMI

PHP网站漏洞怎么修复 如何修补网站程序代码漏洞

如何修复这些漏洞? (npm audit fix 无法修复这些漏洞)

如何修复AppScan漏洞

如何在DOS环境下修复系统