javascript - webpack2将sass/scss编译成js而不是css

Question

我写了一个 webpack 脚本，它应该将所有 .scss 文件编译成一个 css 文件。我选择 webpack 而不是 gulp/grunt 的原因是因为我认为只拥有一个完成所有编译的配置文件会更容易。

我面临的问题是 scss 文件被编译成 javascript 代码。这是 webpack 默认做的事情吗？

我如何使其成为 css？

代码:

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

你应该使用 extract-text-webpack-plugin .安装插件后，您需要在配置中添加一些行

在顶部

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

重写加载器

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

添加要导出的插件字段

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