web-dev-qa-db-ja.com

Sassローダーとwebpack 4

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にはコンパイルされません。

javascriptwebpacksass-loader
9
Jonhy Beebop

webpack 4は、スタンドアロンの*.cssファイルを単独で出力できません。別の*.cssファイルを取得するには、 extract-text-webpack-plugin を使用して、すべてのCSSを独自のエントリチャンクに引き出す必要があります。これは 良いチュートリアル です。

9
Huy Nguyen

Mini-css-extract-pluginを使用できます。

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

Webpack 4を使用してSASSをCSSに抽出するために同じプラグインを使用しましたが、これは魅力のように機能しています。

16
Hamed

ベータ版は[email protected]

npm install extract-text-webpack-plugin@next

0
Tomek