我有一個webpack.config.js文件，該文件為不同的SCSS文件重復了相同的規(guī)則集。

例如在規(guī)則范圍內:

module.exports = {
  module: {
    rules: [
      // in here
    ]
  }
}

我有一個src/styles/templates/cart.scss文件，它輸出到template.cart.css:

{
        test: /cart\.s[ac]ss$/i,
        include: [
          path.resolve(__dirname, "src/styles/templates/cart.scss")
        ],
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'template.cart.css',
            }
          },
          {
            loader: 'extract-loader'
          },
          {
            loader: 'css-loader',
            options: {
              url: false
            },
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: false,
              sassOptions: {
                outputStyle: 'compressed'
              },
            },
          },
        ],
      },

然后我把src/styles/templates/account . scss同樣的東西放到template.account.css中:

{
        test: /account\.s[ac]ss$/i,
        include: [
          path.resolve(__dirname, "src/styles/templates/account.scss")
        ],
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'template.account.css',
            }
          },
          {
            loader: 'extract-loader'
          },
          {
            loader: 'css-loader',
            options: {
              url: false
            },
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: false,
              sassOptions: {
                outputStyle: 'compressed'
              },
            },
          },
        ],
      },

對于不同的文件，這要重復10次以上。

有沒有一種方法可以簡化這一點，而不是為每個文件對重復相同的大塊代碼？

有一次找到解決辦法就忘了回答這個了。

@馬丁給我指明了正確的方向。我誤解了MiniCssExtractPlugin的用法。

這種情況下的解決方案是包含MiniCssExtractPlugin:

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

然后在規(guī)則中使用更一般的測試:

{
        test: /.s[ac]ss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              url: false
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: false,
              sassOptions: {
                outputStyle: 'compressed'
              },
            },
          },
        ],
      },