Sass加载器和Webpack 4

乔尼·比博普

如何在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。

惠阮

webpack4尚无法*.css自行输出独立文件。要获得一个单独的*.css文件,您需要使用将extract-text-webpack-plugin所有CSS拉出到其自己的条目块中。这是一个很好的教程

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章