Webpack: How to merge css and less, THEN apply cssnano

Question

I managed to compile my css and less resources („imported“ from javascript) to all-my-LESS|CSS, extract them using ExtractTextPlugin and merge them together with MergeFilesPlugin to combinedStyles.css.

The bit I am missing: How to run cssnano (e.g. through postcss?) on top of that as the finishing bit? (Oh, and while I habe inline source maps, I didn't manage to generate an external combinedStyles.map file).

This is my combined webpack.config.babel.js (ignore the babel bit, just means, you may write it in ES6, with fancier import statements):

import path from 'path';

const webpack = require('webpack'); //to access built-in plugins
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import MergeFilesPlugin from 'merge-files-webpack-plugin';

const extractCSS = new ExtractTextPlugin("all-my-CSS.css");
const extractLESS = new ExtractTextPlugin("all-my-LESS.css");

export default {
    entry: [ './src/index_5.js' ],
    output: {
        path: path.resolve( 'dist')
        filename: 'bundle.js',
        sourceMapFilename: './bundle.js.map'
    },

    module: {
        rules: [{
                test: /\.css$/,
                use: extractCSS.extract(
                    [{  // This is basically "use"
                        loader: "css-loader",
                        options: {
                            minimize: false, // done later
                            sourceMap: true,
                            modules: false, // no css modules, all global styles
                        }
                    }]
                )
            },
            {
                test: /\.less$/,
                use: extractLESS.extract(  // This is basically "use"
                    [// No style-loader here! We want this external!
                    {
                        loader: "css-loader", // translates CSS into CommonJS
                        options: {
                            minimize: false,
                            sourceMap: true
                        }
                    }, {
                        loader: "less-loader", // compiles Less to CSS
                        options: {
                            sourceMap: true,
                        }
                    }]
                )
            }
        ] // rules
    }, // module

    devtool: 'inline-source-map',
    devServer: { inline: true },

    plugins: [
        extractCSS,
        extractLESS,
        new MergeFilesPlugin({
            filename: 'combinedStyles.css', //output filename
            test: /\.css$/,
            deleteSourceFiles: false // for now
        })
    ]
};

Vercelli

Answer 1

I have added postcss-loader with css-nano, check if it helps.

Also I don't see here need to use MergeFilesPlugins ( just my opinion) . ExtractTextPlugin can be useful here.

Just use one ExtractTextPlugin and put all css or less file in one folder( with .css or .less ext ), loaders will be applied to them selectively and later in plugins just use

new ExtractTextPlugin('style.css')

to get a common css file extracted.

Using cssnano :

[{
                test: /\.css$/,
                use: ExtractTextPlugin.extract(
                    [{  // This is basically "use"
                        loader: "css-loader",
                        options: {
                            minimize: false, // done later
                            sourceMap: true,
                            modules: false, // no css modules, all global styles
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                                plugins: function () {
                                        return [
                                        require('cssnano')({
                                            autoprefixer: false,
                                            safe: true
                                            })
                                        ];
                                }
                           }
                    }]
                )
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract(  // This is basically "use"
                    [// No style-loader here! We want this external!
                    {
                        loader: "css-loader", // translates CSS into CommonJS
                        options: {
                            minimize: false,
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                                plugins: function () {
                                        return [
                                        require('cssnano')({
                                            autoprefixer: false,
                                            safe: true
                                            })
                                        ];
                                 }
                            }
                    },
                    {
                        loader: "less-loader", // compiles Less to CSS
                        options: {
                            sourceMap: true,
                        }
                    }]
                )
            }
        ]

Kero