web-dev-qa-db-ja.com

Webpack 4. scssをコンパイルしてcssファイルを分離します

私は運のない別のcssファイルにscssをコンパイルしようとしています。現在では、cssはすべてのjsコードとともにbundle.jsに入ります。 CSSを独自のファイルに分割するにはどうすればよいですか？

これは私の設定がどのように見えるかです。

var path = require("path");

module.exports = {
entry: "./js/main.js",
output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/dist"
},
watch:true,
module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: "babel-loader",
                options: { presets: ["es2015"] }
            }
        },
        {
            test: /\.scss$/,
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader"
                },
                {
                    loader: "sass-loader"
                }
            ]
        }
    ]
}

};

webpackwebpack-4
8
fortyfiveknots

MiniCssExtractPlugin を使用する必要があります。これにより、cssが別のファイルに抽出されます。

Webpack.config.jsファイルには、追加または変更が必要な部分がいくつかあります。

ファイルの先頭にプラグインが必要です：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

モジュールオブジェクトにはpluginsプロパティも必要です。

plugins: [
  new MiniCssExtractPlugin({
    filename: "[name].css",
    chunkFilename: "[id].css"
  })
]

そして、scssルールを変更する必要があります。 .scssファイル（おそらくscssファイルに.scssという名前を付けるのが最善）とnpmでインストールする必要のあるsass-loaderの追加を含むテストはわずかに異なることに注意してください。 'use'配列のローダーは逆の順序で動作するため、sass-loadedは最初にscssをcssに変換し、次にcss-loaderとextractプラグインがcssを別のファイルに再度抽出します。

{
    test: /\.s?css$/,
    use: [
      MiniCssExtractPlugin.loader,
      "css-loader",
      "sass-loader"
    ]
}

したがって、設定ファイルは次のように変更されると思います。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var path = require("path");

module.exports = {
    entry: "./js/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        publicPath: "/dist"
    },
    watch:true,
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: { presets: ["es2015"] }
                }
            },
            {
                test: /\.s?css$/,
                use: [
                  MiniCssExtractPlugin.loader,
                  "css-loader",
                  "sass-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
          filename: "[name].css",
          chunkFilename: "[id].css"
        })
    ]
}

お役に立てば幸いです。

5
Bryan