如何在 Webpack 中编译多个 SCSS 文件？答案

【问题标题】：How do I compile multiple SCSS files in Webpack?如何在 Webpack 中编译多个 SCSS 文件？
【发布时间】：2020-10-25 13:26:45
【问题描述】：

我有单独的 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 文件）。有什么想法吗？

【问题讨论】：

我想你对 webpack 的印象是错误的，它不是 task runner，而是 bundler。
@felixmosh 同意，但有时您希望将 css 保存在单独的文件中并仅捆绑 js 文件。
不相关，webpack作为一个bundler，工作在一个入口点，加载css&js&图片。然后你可以定义如何处理它，要么捆绑在 js 文件中，要么将其发送到单独的文件中。
所以我想我的问题是如何删除/禁用条目的 JS 输出。正如我在下面的答案中发布的那样，我必须将其删除，而理想情况下我根本不会拥有它。

标签： javascript webpack sass

【解决方案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"

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

【讨论】：