Sass 加载器和 webpack 4答案

【问题标题】：Sass loader and webpack 4Sass 加载器和 webpack 4
【发布时间】：2018-09-12 21:51:32
【问题描述】：

如何在 webpack 4 中使用 sass 加载器？我阅读了很多关于此的内容，大多数网站都建议使用 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。

【问题讨论】：

标签： javascript webpack sass-loader

【解决方案1】：

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

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

我使用相同的插件使用 webpack 4 将 SASS 提取为 CSS，它的工作原理非常棒。

【讨论】：

我为 webpack 4 测试了 extract-text-webpack-plugin 的 beta 版本，它也运行良好。 github.com/webpack-contrib/extract-text-webpack-plugin/releases/…
是的，但它是测试版。更重要的是-extract-text-webpack-plugin 的创建者建议用户使用mini-css-extract-plugin

【解决方案2】：

webpack 4 还不能单独输出独立的*.css 文件。要获得一个单独的*.css 文件，您需要使用extract-text-webpack-plugin 将所有CSS 提取到它自己的入口块中。这是good tutorial。

【讨论】：

它有帮助，但我仍然无法获得输出 main.css 文件。我正在尝试在配置文件中将stylesheet: path.resolve('src', 'scss/styles.scss'), 添加到我的entry 中，并且我收到了 main.js、main.css 和 stylesheet.js（为什么？）。我试图在index.js 中要求我的样式，但它总是出错（找不到模块）。
@MaximZemskov 尝试从您的 webpack 配置中删除 css 条目，看看是否有帮助。
那个extract-text-webpack-plugin 不适用于webpack 4。相反，你应该使用这个：mini-css-extract-plugin

【解决方案3】：

测试版与webpack@4.13.0 配合使用效果很好

npm install extract-text-webpack-plugin@next

【讨论】：