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

不是最干净的解决方案，但这是我能想到的唯一一个。