Ouput css, not inline

How to output the css file as file.css and not inline in javascript. My config looks like below.

                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader" 


I tested "file-loader! Css-loader! Less-loader" // but file content is not css


source to share

1 answer

You will need to use extract-text-plugin . You can create one css file for the whole package, or one for each chunk. For example, if you wanted all your CSS in your bundle to move to a separate file, you would add that to your config

module.exports = {
    loaders: [
            // Extract css files
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            // Optionally extract less files
            // or any other compile-to-css language
                test: /\.less$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
    plugins: [
        new ExtractTextPlugin("[name].css", {
            allChunks: true


For details, see the web page settings table for more reference



All Articles