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

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