CODEWITHSUNDEEP
csswebpackless
Oblomov
Oblomov

Reputation: 9635

Compiling a .less file to a specific .css file using webpack

I want to use webpack, to compile a style.less file to a module.css file.

I have found https://github.com/webpack-contrib/less-loader as a very popular package, which however does not seem to work for me, since I really need to create that module.css file.

So how can I do that with webpack?

Upvotes: 2

Views: 1224

Answers (1)

Oblomov
Oblomov

Reputation: 9635

Found the solution myself. The following webpack.config.js snippet works for me:

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = function(env) {
    return {
       ...
        module: {
            loaders: [
                {
                    test: /.*\.less$/,
                    loader: ExtractTextPlugin.extract({
                        loader:[ 'css-loader', 'less-loader' ],
                        fallbackLoader: 'style-loader'
                    })
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin({ filename: 'module.css', disable: false, allChunks: true })
        ]
    };
};

Where ... is a placeholder for other parts of the config, which are not relevant here.

Upvotes: 2

Related Questions