Angular Error: Postcss Received Undefined Instead of CSS String

Angular ERROR: PostCSS received undefined instead of CSS string

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.

Vue2 - Error: PostCSS received undefined instead of CSS string

Try it

npm install node-sass
or 
npm rebuild node-sass

I got answer for here

Webpack Compilation with Postcss fail because not find scss file in library in node_modules

Like I said in the question, the problem was the compiler was failing to compile the scss files of the components when they try to import an scss file from node_modules.

I resolved it with sass-loader applying the following rule for scss in the webpack.config.common.js:

        {
            test: /\.component\.(css|sass|scss)$/,
            use: [
                'to-string-loader',                  
                'css-loader',
                'postcss-loader',
                {
                    loader: 'sass-loader',
                    options: {
                        sassOptions: {
                            importer: url => {
                                if (url.startsWith('@angular/')) {
                                    return {
                                        file: path.resolve(`./node_modules/${url}`),
                                    };
                                }
                                return null;
                            },
                        },
                    }
                }
            ]
        }

If I will have to import another library from node_module I should add another else if statement:

Example, let's say I have a custom library my-library in node_modules and I want to access to: node_modules/my-library/style.scss so I have to add the following else if statement:

   {
        test: /\.component\.(css|sass|scss)$/,
        use: [
            'to-string-loader',                  
            'css-loader',
            'postcss-loader',
            {
                loader: 'sass-loader',
                options: {
                    sassOptions: {
                        importer: url => {
                            if (url.startsWith('@angular/')) {
                                return {
                                    file: path.resolve(`./node_modules/${url}`),
                            };
                            else if (url.startsWith('my-library/')) {
                                    return {
                                        file: path.resolve(`./node_modules/${url}`),
                                    };
                                }
                            return null;
                        },
                    },
                }
            }
        ]
    }

With that, my project works again. Also it compiles with build and serve.

Finally, in my postcss.config.js I only need:

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

How to fix Module build failed (from ./node_modules/postcss-loader/src/index.js)

I resolved it. The CSS on that line (shown below) had a comma at the end and had no values after that. And postcss was throwing error due to that.

background-image: linear-gradient(to right, #973a95, #055faa, );

Removed the comma and it worked as expected

background-image: linear-gradient(to right, #973a95, #055faa);

---

Related Topics