javascript - Sass 加载器和 webpack 4

Question

如何在 webpack 4 中使用 sass loader？我阅读了很多关于此的内容，大多数网站都推荐使用 ExtractTextPlugin，但 ExtractTextPlugin 不适用于 webpack 4。

我写了以下 webpack.config.js:

const path = require('path');
const ClosureCompilerPlugin = require('webpack-closure-compiler');


module.exports = {
    module: {
        rules: [
            {
             test: /\.scss$/,
             use: [{
                 loader: "style-loader"
             }, {
                 loader: "css-loader"
             }, {
                 loader: "sass-loader"
             }]
            }
        ]
    },
    plugins: [
        new ClosureCompilerPlugin({
            compiler: {
                language_in: 'ECMASCRIPT6',
                language_out: 'ECMASCRIPT3',
                compilation_level: 'ADVANCED'
            },
            concurrency: 3,
        })
    ]
};

输出 .js 文件运行良好，但我的 .scss 没有编译成 css。我尝试添加入口点:

entry: {
    stylesheet: path.resolve('src', 'scss/styles.scss'),
    main: path.resolve('src', 'index.js')
}

然后我的 styles.scss 编译为 stylesheet.js，但我没有编译为 .css。

Answer 1

您可以使用 mini-css-extract-plugin。

https://github.com/webpack-contrib/mini-css-extract-plugin

我使用相同的插件通过 webpack 4 将 SASS 提取到 CSS，它的工作就像一个魅力。