Angular - ERROR: PostCSS received undefined instead of CSS string

Question

Trying to build an Angular project and I'm getting below errors. This project was 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

Solution 1

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.

Solution 2

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

Solution 3

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

Solution 4

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: [],

View more solutions