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

Question

I'm trying to build my application, but I'm getting this error from 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)

Version details

Answer 1

1. Build your application on local machine in development mode with "optimization": true set in your angular.json. This is needed for more convenient debugging.

2. Open your style.css file generated in the dist folder and inspect it for errors (in case you're developing in docker container, copy this file from the container to host).

3. When you find syntax errors like this: try to match the erroneous code in the generated style.css with your source code and fix the issue / issues there.

In my case the original code looked like this: where darker is a non-existing palette color which I changed to main (existing one) and that was the fix. Similar fix was for fill: !important .

Answer 2

Angular has optimization flag in angular.json if you set it to true, minificaiton css also happens.

In my case it was very stupid mistake in tailwind.config.js and not in any css class. Ultimately Tailwind generates bunch of classes only

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

If you have tailwind integrated and can't find problem in css, check your tailwind config file:)!

Answer 3

I was using angular metronic. I got the same error and after a long time I found the wrong code block and commented it. error fixed.

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