Angular ERROR: PostCSS received undefined instead of CSS string

Question

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

score 105 · Answer 1 · answered Feb 08 '21 at 10:44

105

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

answered Feb 08 '21 at 10:44

Alec

2,432
2
18
28

4

Did not work at first, had to run `npm install` after running `npm rebuild node-sass` before it worked for me – Dieter Gribnitz Mar 07 '21 at 15:17
1

Thanks! This worked for me in a Vue 2.x project that started throwing this error – James May 31 '21 at 05:10
1

After use this command: npm i node-sass -D It works for me as charm – LetsCMS Pvt Ltd Jun 17 '21 at 16:16
I uninstalled node-sass and didn't realize it was a dependency on packagr for Angular project (old style of build - upgrading...but need old for testing) – TamusJRoyce Nov 10 '21 at 14:09
Thanks Google!! – Dave Stewart Dec 02 '21 at 21:54
This also solved my problem! – Maico Jan 18 '22 at 00:10
This did not help for. I followed the answer by @noreply which worked for me. I am running vuejs instead of angular. – Dirk Schumacher Feb 21 '22 at 16:33
Depends on whether you use node-sass or dart-sass – josemigallas May 05 '23 at 12:20

score 72 · Answer 2 · answered Jan 19 '21 at 17:13

72

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

answered Jan 19 '21 at 17:13

noreply

867
6
5

9

Odd I needed to add sass after adding sass-loader (using yarn and Vue 2.x), but that fixed it for me. – Glen Mazza Jan 22 '21 at 11:05
3

Sometimes I think what if there were no developer community. How could we poor devs would know that we have to manually add sass too :'D – Vinay Oct 17 '21 at 12:40
2

The actual command I had to use was: `npm install sass-loader sass webpack --save-dev` Taken from [https://webpack.js.org/loaders/sass-loader/](https://webpack.js.org/loaders/sass-loader/) – Dirk Schumacher Feb 21 '22 at 16:33

score 20 · Answer 3 · answered Jul 08 '21 at 15:52

20

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

answered Jul 08 '21 at 15:52

Jadamae77

828
7
13

4

I had the same problem as a I upgraded from Angular 12.0.x to 12.4.x. The solution was to remove the `styles: [``]` – LaurentG Sep 30 '21 at 08:59

score 7 · Accepted Answer · answered Jul 16 '20 at 00:35

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.

score 3 · Answer 5 · answered Jun 10 '22 at 08:48

3

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

npm i node-sass -D

answered Jun 10 '22 at 08:48

Arefe

11,321
18
114
168

score 2 · Answer 6 · answered Jun 17 '22 at 02:59

2

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.

answered Jun 17 '22 at 02:59

shawn

21
2

score 0 · Answer 7 · answered Aug 02 '21 at 14:40

0

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

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

answered Aug 02 '21 at 14:40

Peter Olu

47
1
3

Angular ERROR: PostCSS received undefined instead of CSS string

7 Answers7

Linked