ouput css file rather than inline

Question

How to ouput css file as file.css rather than inline in javascript. My configuration look like below.

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

I tested with "file-loader!css-loader!less-loader" //but the content of the file is not css

Answer 1

You would have to use the extract-text-plugin. You can create one css file for your entire bundle or one for each chunk. For example if you want all your CSS in your bundle moved to a separate file, you would add this to your figuration

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
        })
    ]
}

See stylesheets webpack configuration for more reference