如何在 Webpack 中編譯多個 SCSS 文件？

Question

我有單獨的 SCSS 文件，我想編譯成單獨的 CSS 文件。 這是我的 Webpack 配置文件的一部分：

module.exports = {
  entry: ['./src/js/main.js', './src/scss/main.scss', './src/scss/additional.scss'],
  output: {
    filename: './assets/js/main.bundle.js',
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './assets/css/main.bundle.css',
    }),
  ],
  modules: {...}
}

上面的例子只會編譯main.scss並省略additional.scss 。 這是我嘗試過的：

module.exports = {
  entry: {
    main: ['./src/js/main.js', './src/scss/main.scss'],
    additional: './src/scss/additional.scss',
  },
  output: {
    filename: './assets/js/[name].bundle.js',
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './assets/css/[name].bundle.css',
    }),
  ],
  modules: {...}
}

這有點工作，但是這也會生成一個我不需要的additional.bundle.js的.bundle.js（我只需要一個 JavaScript output 和兩個 CSS 文件）。 有任何想法嗎？

Answer 1

這是我能想到的解決方案。 您基本上需要為 scss 和其他所有內容創建單獨的配置對象：

module.exports = [{
  entry: {
    main: ['./src/js/main.js'],
  },
  output: {
    filename: './assets/js/[name].bundle.js',
  },
  modules: {...}
}, {
  entry: {
    main: ['./src/scss/main.scss'],
    additional: ['./src/scss/additional.scss'],
  },
  output: {
    filename: './.leftover/[name].bundle.js',
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './assets/css/[name].bundle.css',
    }),
  ],
  modules: {...}
}]

然后刪除npm run build上的.leftover目錄。

package.json ：

"build": "webpack --mode production && del-cli dist/.leftover"

不是最干凈的解決方案，但這是我能想到的唯一一個。