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

Question

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

Note: the file on '/srv/http/r2-app/styles.e4dd05dfea4b7f17f938.css' does not exist.

[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)

版本详情

Answer 1

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

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

的类似修复

Answer 2

Angular 在 angular.json 中有优化标志，如果您将其设置为 true，缩小 css 也会发生。

在我的案例中，tailwind.config.js 是一个非常愚蠢的错误，而不是 css class。最终 Tailwind 仅生成一堆 classes

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

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

Answer 3

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

边框宽度：get($checkbox-config, types, accent, borderWidth) !important;

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

Angular ionic build: Cannot read property 'toLowerCase' of undefined postcss

sass

ionic-framework

postcss

cssnano

angular

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

Angular ionic build: Cannot read property 'toLowerCase' of undefined postcss

sass

ionic-framework

postcss

cssnano

angular

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