Sass loader和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,它的工作就像一个魅力.

Answer 2

webpack4还不能自己输出独立*.css文件.要获取单独的*.css文件,您需要使用将extract-text-webpack-plugin所有CSS拉入其自己的条目块中.这是一个很好的教程.

Answer 3

如果符合您的要求，您可以将 sass-loader@10.1.1 与 Webpack 4 一起使用。

sass-loader 版本 11.0.0 引入了这个最低 webpack 5 支持的版本重大更改。您可以在https://openbase.com/js/sass-loader/versions查看更改日志