Webpack2将sass / scss编译为js而不是css

Question

I have written a webpack script which should compile all .scss files into a single css file. The reason why I chose webpack instead of gulp/grunt is because I thought it would be easier to just have a single config file in which all the compilation is done.

The problem I am facing is that scss files are getting compiled to javascript code. Is this something that webpack does by default ?

How do I make it to css ?

code:

module.exports = {
     entry: glob.sync('./src/components/**/*.scss') ,
     output: {
         path: path.resolve(__dirname, 'public', 'css'),
         filename: 'styles.css'
     },
     module: {
       loaders: [
           {
            test: /\.scss$/,
            loaders: ['style-loader', 'css-loader', 'sass-loader']

          }
        ]
    }
 };

Answer 1

You should use extract-text-webpack-plugin . After installing plugin you need to add some line to your config

At top

var ExtractTextPlugin = require("extract-text-webpack-plugin");

Rewrite loader

    {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader", "sass-loader")
    }

Add plugins field to export

module.exports = {
    .....
    plugins: [
        new ExtractTextPlugin({filename: 'styles.css'})
    ]
    ...
}