Angular ERROR: PostCSS received undefined instead of CSS string

user_13689060 0
Viewed 43386

Trying to build an Angular project and I'm getting the errors below. This project built fine last week. I made some changes to other projects that use the Dlls from this project, but no changes to this project. I already spent a lot of time troubleshooting it with no luck and appreciate any help.

ERROR: PostCSS received undefined instead of CSS string An unhandled exception occurred: PostCSS received undefined instead of CSS string

postcss angular build css
7 Answers

This can sometimes happen if node-sass was compiled for a different version of Node.js than you're currently running (ie if you've recently changed your Node.js version). You can fix that with:

npm rebuild node-sass
user_40036710

if you are using webpack, and trying to use sass-loader, also add sass

user_140513080

I had this same issue when attempting to test an Angular library, and the issue was I had [``] instead of [] in the styles property of my component metadata.

Wrong

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

Right

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

I had similar problem. I was trying to build an angular library and the message below appeared:

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

I was using gulp-run to execute the command ng build library-name --prod. But, executing the command ng build library-name --prod directly on the terminal, the log error was smaller, but similar too.

The problem was in one component. The component had one styleURL (Angular component decorator), like this:

...component.css

but, the library uses scss. So, I changed the path to:

...component.scss

and I executed the command 'ng build library-name --prod'. So, the error didn't appear again.

I was using NVM v0.35.2 (allow to have more than one NodeJS version installed in my machine); NodeJS v12.18.2; Ubuntu x64 18.0.4 LTS and Angular CLI 9.1.9.

user_139370760

Check the node version, see if the version of node changes cause this problem. I use node version 16.14.2 which occured this error, after switch to 12.16.1 it works well. Just check your node-sass and node version will find a way out.

user_178466660

This can happen due to change in version of node. I had same issue with a NUXT app. What I did was

  1. using yarn, in the root directory of your project, run yarn. But if you're using npm run npm install
  2. start your project again.
user_110155430

I faced the same situation now and the command that helped me is -

npm i node-sass -D
user_27461100
Related