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。

- Jonhy Beebop

Answer 1

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

我曾经使用过这个插件，用于从 webpack 4 中提取 SASS 到 CSS，并且它的效果非常好。 https://github.com/webpack-contrib/mini-css-extract-plugin

- Hamed

---

我测试了适用于webpack 4的extract-text-webpack-plugin的beta版本，它也正常工作。https://github.com/webpack-contrib/extract-text-webpack-plugin/releases/tag/v4.0.0-beta.0 - Hamed

是的，但它还处于测试版。此外，“extract-text-webpack-plugin”的创建者建议用户使用“mini-css-extract-plugin”。 - thexpand

Answer 2

webpack 4 目前还不能单独输出 *.css 文件。如果需要获得一个单独的 *.css 文件，你需要使用extract-text-webpack-plugin 插件将所有 CSS 提取到它自己的入口 chunk 中。这是一篇好的教程。

- Huy Nguyen

---

它有所帮助，但我仍然无法获得 main.css 文件的输出。我尝试在配置文件中将 stylesheet: path.resolve('src', 'scss/styles.scss') 添加到我的 entry 中，但我会收到 main.js、main.css 和 stylesheet.js（为什么？）这几个文件。我试图在 index.js 中引入我的样式，但总是出现错误（找不到模块）。 - Max

@MaximZemskov，尝试从你的webpack配置中删除css条目，看看是否有帮助。 - Huy Nguyen

那个 extract-text-webpack-plugin 在 webpack 4 中表现不佳。相反，你应该使用这个：mini-css-extract-plugin。 - danielrvt

Answer 3

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

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

- André Benedetti

---

openbase现在无法访问：这个链接已经失效了 :( - Zargold

Answer 4

测试版与 webpack@4.13.0 配合良好。

npm install extract-text-webpack-plugin@next

- Tomek