Angular ionic 构建：postcss无法读取未定义属性 'toLowerCase'

Question

我正在尝试构建我的应用程序，但我从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)

版本详情

- Vitor Kevin

---

如果您进入了提到的位置 (/srv/http/r2-app/styles.e4dd05dfea4b7f17f938.css:50691:1)，是否会显示试图调用 toLowerCase 方法的对象？ - user796446

我尝试了，但是这个文件 "srv/http/r2-app/styles.e4dd05dfea4b7f17f938.css:50691:1" 甚至不存在。 - Vitor Kevin

我不确定你需要哪些版本，但这种类型的错误表明库所期望的版本与实际版本不匹配。 - Ben L

Answer 1

我正在使用Angular Metronic。出现了相同的错误，经过很长时间的寻找，我找到了错误的代码块并进行了注释。错误已修复。

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

- karincayazilim

Answer 2

Angular在angular.json中有一个优化标志，如果将其设置为true，则会进行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配置文件 :)！

- minigeek

Answer 3

1. 在本地机器上用 "optimization": true 设置在 angular.json 中以开发模式构建您的应用程序。这对于更方便的调试是必要的。

2. 打开在 "dist" 文件夹中生成的 style.css 文件并检查其中的错误（如果您正在 docker 容器中开发，则将此文件从容器复制到主机）。

3. 当您找到诸如以下语法错误时： 请尝试在生成的 style.css 中匹配错误代码与您的源代码，并在那里修复问题 / 问题。

在我的情况下，原始代码如下所示： 其中 darker 是一个不存在的调色板颜色，我将其更改为 main（现有的），这就是解决方法。类似的解决方法也适用于 fill: !important。

- Aram Khachatrian