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

Question

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?

Oblomov · Accepted Answer · 2017-09-07 05:20:15Z

2

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.

edited Sep 7, 2017 at 5:20

answered Sep 7, 2017 at 5:03

Oblomov

9,73524 gold badges66 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related