How do I compile multiple SCSS files in Webpack?

Question

I have separate SCSS files I want to compile into separate CSS files. Here is a part of my Webpack config file:

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: {...}
}

The example above will only compile main.scss and omit additional.scss. Here is what I tried:

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: {...}
}

This kinda works, however this will also generate an additional.bundle.js which I don't need (I only need one JavaScript output and two CSS files). Any ideas?

Answer 1

Here is the solution I can up with. You basically need to create separate config objects for scss and everything else:

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: {...}
}]

then remove the .leftover directory on npm run build.

package.json:

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

Not the cleanest solution, however that's the only one I can think of.