Use purifycss with Angular 4

Question

I'm trying to use Angular with PurifyCss (using webpack) but so far, no success on the process... I'm trying this on the dev environment, basically what I did was:

• Create new project using AngularCli ng new my-project
• Eject the webpack config ng eject
• Install PurifyCss npm i --save-dev purify-css purifycss-webpack

Now it's where I think it get's trick, because on the PurifyCss github page it says:

You should use it with the extract-text-webpack-plugin.

But when I tried adding this I keep getting errors. I don't know if this is happening because Angular uses a JS file instead of CSS, or because I'm doing something wrong. The only changes I did to the WebPack config were:

Note: I'm using this with scss files.

I'm removing some webpack lines, but the code is working just fine if undo the changes I'm describing below.

const glob = require('glob-all');
const PurifyCSSPlugin = require('purifycss-webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

"module": {
    "rules": [
        // other rules...
        {
            "exclude": [
                path.join(process.cwd(), "src\\styles.scss")
            ],
            "test": /\.scss$|\.sass$/,
            "use": ExtractTextPlugin.extract({
                "use": [
                    "exports-loader?module.exports.toString()",
                    // nothing changes here
                ]
            })
        },
        {
            "include": [
                path.join(process.cwd(), "src\\styles.scss")
            ],
            "test": /\.scss$|\.sass$/,
            "use": ExtractTextPlugin.extract({
                "use": [
                    "style-loader",
                    // nothing changes here
                ]
            })
        },
        // other rules...
    ]
}
"plugins": [
    new ExtractTextPlugin({
        filename: 'styles.bundle.js'
    }),
    new PurifyCSSPlugin({
        paths: glob.sync([
            path.join(__dirname, 'src', 'index.html'),
        ])
    }),
    // other plugins
]

What do I need to do to make it work? I'm stuck on this and can't make it work.

Answer 1

You may try to add another build tool (Gulp or Grunt) on top of Angular CLI and trigger the specific task after Angular CLI build is completed. This will help you avoid ejection and deal with this type of errors that you're dealing with. In addition to that, if Angular team will decide to adjust webpack configuration or even move to a new build tool, most likely you will encounter the same issue again.

I wrote an article specifically on this topic, where I provided the instruction and configuration for Grunt and Gulp. Both of them work perfectly.

How to remove unnecessary CSS in your Angular project