角度错误：PostCSS 收到未定义而不是 CSS 字符串答案

【问题标题】：Angular ERROR: PostCSS received undefined instead of CSS string角度错误：PostCSS 收到未定义而不是 CSS 字符串
【发布时间】：2020-10-23 14:05:22
【问题描述】：

尝试构建一个 Angular 项目，但出现以下错误。这个项目上周建得很好。我对使用该项目中的 Dll 的其他项目进行了一些更改，但没有对此项目进行任何更改。我已经花了很多时间对其进行故障排除，但没有成功，感谢任何帮助。

错误：PostCSS 收到未定义而不是 CSS 字符串发生未处理的异常：PostCSS 收到 undefined 而不是 CSS 字符串

【问题讨论】：

标签： css angular build postcss

【解决方案1】：

如果node-sass 编译的 Node.js 版本与您当前运行的版本不同（即，如果您最近更改了 Node.js 版本），有时会发生这种情况。您可以通过以下方式解决此问题：

npm rebuild node-sass

【讨论】：

起初不起作用，必须在运行 npm rebuild node-sass 之后运行 npm install 才能对我有用
谢谢！这在开始抛出此错误的 Vue 2.x 项目中对我有用
使用此命令后： npm i node-sass -D 它对我很有用
我卸载了 node-sass，但没有意识到它是 Angular 项目对 packagr 的依赖（旧风格的构建 - 升级......但需要旧的进行测试）
感谢谷歌！！

【解决方案2】：

如果你正在使用 webpack，并尝试使用 sass-loader，还请添加 sass

【讨论】：

奇怪我需要在添加 sass-loader 后添加 sass（使用 yarn 和 Vue 2.x），但这为我解决了问题。
有时我想如果没有开发者社区会怎样。我们可怜的开发人员怎么会知道我们也必须手动添加 sass：'D
我必须使用的实际命令是：npm install sass-loader sass webpack --save-dev取自https://webpack.js.org/loaders/sass-loader/

【解决方案3】：

我有类似的问题。我正在尝试构建一个角度库，并出现以下消息：

Building Angular Package

------------------------------------------------------------------------------
Building entry point 'library-name'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
See "/tmp/ng-itlEgm/angular-errors.log" for further details.
[12:03:38] 'compile' errored after 17 s
[12:03:38] Error: Command `ng build library-name --prod` exited with code 127
    at ChildProcess.handleSubShellExit (/node_modules/gulp-run/command.js:166:13)
    at Object.onceWrapper (events.js:422:26)
    at ChildProcess.emit (events.js:315:20)
    at ChildProcess.EventEmitter.emit (domain.js:505:15)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
[12:03:38] 'build' errored after 17 s

我使用gulp-run 来执行命令ng build library-name --prod。但是，直接在终端执行命令ng build library-name --prod，日志错误更小，但也差不多。

问题出在一个组件上。该组件有一个 styleURL（Angular 组件装饰器），如下所示：

...component.css

但是，库使用scss。因此，我将路径更改为：

...component.scss

然后我执行了命令“ng build library-name --prod”。所以，错误没有再次出现。

我使用的是 NVM v0.35.2（允许在我的机器上安装多个 NodeJS 版本）； NodeJS v12.18.2； Ubuntu x64 18.0.4 LTS 和 Angular CLI 9.1.9。

【讨论】：

【解决方案4】：

我在尝试测试 Angular 库时遇到了同样的问题，问题是我的组件元数据的 styles 属性中有 [``] 而不是 []。

错误

@Component({
selector: 'my-input',
template: `
  <input
  ... />
  `,
styles: [``],

对

@Component({
selector: 'my-input',
template: `
  <input
  ... />
  `,
styles: [],

【讨论】：

我从 Angular 12.0.x 升级到 12.4.x 时遇到了同样的问题。解决方案是删除styles: [``]

【解决方案5】：

这可能是由于节点版本的变化而发生的。我对 NUXT 应用程序有同样的问题。我所做的是

使用yarn，在你项目的根目录下，运行yarn。但是如果你使用 npm 运行npm install
重新开始您的项目。

【讨论】：