Sass loader和webpack 4 [英] Sass loader and webpack 4

问题描述

如何在webpack 4中使用sass loader？我读了很多关于这一点，大多数网站建议使用ExtractTextPlugin，但ExtractTextPlugin不适用于webpack 4.

How to use sass loader with webpack 4? I read a lot about this and most sites recomended to use ExtractTextPlugin, but ExtractTextPlugin doesn't work with 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。我试图添加入口点：

Output .js file works well, but my .scss didn't compile to css. I'm tried to add entry points:

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

之后我的styles.scss编译成stylesheet.js，但我不是.css。

and after this my styles.scss compiles to stylesheet.js, but i not to .css.

推荐答案

webpack 4还无法自行输出独立的 *。css 文件。要获得单独的 *。css 文件，您需要使用 extract-text-webpack-plugin 将所有CSS拉出到自己的入口块中。这是优秀教程。

webpack 4 is not yet capable of outputting standalone *.css file on its own. To get a separate *.css file, you need to use the extract-text-webpack-plugin to pull out all the CSS into its own entry chunk. This is a good tutorial.

这篇关于Sass loader和webpack 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！