Angular ionic build：无法读取未定义 postcss 的属性“toLowerCase”答案

【问题标题】：Angular ionic build: Cannot read property 'toLowerCase' of undefined postcssAngular ionic build：无法读取未定义 postcss 的属性“toLowerCase”
【发布时间】：2021-08-01 05:30:18
【问题描述】：

我正在尝试构建我的应用程序，但我从 Postcss 收到此错误。

注意：“/srv/http/r2-app/styles.e4dd05dfea4b7f17f938.css”上的文件不存在。

[error] TypeError: Cannot read property 'toLowerCase' of undefined
    at /srv/http/r2-app/styles.e4dd05dfea4b7f17f938.css:50691:1
    at hasInherit (/srv/http/r2-app/node_modules/postcss-merge-longhand/dist/lib/canMerge.js:16:39)
    at Array.some (<anonymous>)
    at _default (/srv/http/r2-app/node_modules/postcss-merge-longhand/dist/lib/canMerge.js:23:13)
    at /srv/http/r2-app/node_modules/postcss-merge-longhand/dist/lib/decl/borders.js:234:33
    at mergeRules (/srv/http/r2-app/node_modules/postcss-merge-longhand/dist/lib/mergeRules.js:44:11)
    at /srv/http/r2-app/node_modules/postcss-merge-longhand/dist/lib/decl/borders.js:233:29
    at Array.forEach (<anonymous>)
    at Object.merge (/srv/http/r2-app/node_modules/postcss-merge-longhand/dist/lib/decl/borders.js:231:7)
    at /srv/http/r2-app/node_modules/postcss-merge-longhand/dist/index.js:20:13
    at Array.forEach (<anonymous>)
    at /srv/http/r2-app/node_modules/postcss-merge-longhand/dist/index.js:18:23
    at /srv/http/r2-app/node_modules/postcss/lib/container.js:115:18
    at /srv/http/r2-app/node_modules/postcss/lib/container.js:74:18
    at Root.each (/srv/http/r2-app/node_modules/postcss/lib/container.js:60:16)
    at Root.walk (/srv/http/r2-app/node_modules/postcss/lib/container.js:71:17)
    at Root.walkRules (/srv/http/r2-app/node_modules/postcss/lib/container.js:113:19)

版本详情

【问题讨论】：

如果你去提到的位置（/srv/http/r2-app/styles.e4dd05dfea4b7f17f938.css:50691:1）它会显示试图调用toLowerCase的对象
我试试，但这个文件“srv/http/r2-app/styles.e4dd05dfea4b7f17f938.css:50691:1”甚至不存在
我不确定您需要哪些版本，但这种类型的错误表明库的预期与现有的版本控制错误不匹配。

标签： angular ionic-framework sass postcss cssnano

【解决方案1】：

在开发模式下在本地机器上构建您的应用程序，并在您的 angular.json 中设置“优化”：true。这是为了更方便的调试所需要的。
打开您在dist 文件夹中生成的 style.css 文件并检查它是否有错误（如果您在 docker 容器中开发，请将此文件从容器复制到主机）。
当您发现这样的语法错误时：尝试将生成的 style.css 中的错误代码与您的源代码匹配并修复那里的问题。

在我的例子中，原始代码如下所示：其中darker 是一种不存在的调色板颜色，我将其更改为main（现有的一种），这就是修复。 fill: !important 也有类似的修复。

【讨论】：

【解决方案2】：

Angular 在 angular.json 中有优化标志，如果你将它设置为 true，minificaiton css 也会发生。

在我的情况下，tailwind.config.js 中的错误非常愚蠢，而任何 css 类中都没有。最终 Tailwind 只生成一堆类

   grey: {
    50: '#d8d8d8',
    200: '#8d8d8d',
    300: '#3a3a3f',
    400: '#252b3d',
    500: '#242837',
    600: '#222434',
    700: '#1b1d29',
    800: '' --------------------> silly mistake which failed minifycss
  },

如果您集成了 tailwind 并且在 css 中找不到问题，请检查您的 tailwind 配置文件 :)！

【讨论】：

【解决方案3】：

我使用的是 Angular Metronic。我得到了同样的错误，很长一段时间后我发现了错误的代码块并对其进行了注释。错误已修复。

border-width: get($checkbox-config, types, accent, borderWidth) !important;

【讨论】：