如何在 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我不需要的文件（我只需要一个 JavaScript 输出和两个 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: {...}
}]

然后删除.leftover上的目录npm run build。

package.json：

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

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