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

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

1 个答案: