How to combine all .SCSS files imported to different JS components and output them to a single .CSS bundle?

Question

I'm working on a project that utilizes plain JS (no frameworks) and SCSS and bundling it all with Webpack.

The structure is roughly like this:

│   index.html
│   index.js
│   webpack.config.js
│   
├───build
│       app.bundle.js
│       bundle.css
│       error.bundle.js
│       index.html
│                   
└───src
    ├───components
    │   │   App.js
    │   │   
    │   └───ErrorMessage
    │           error.scss
    │           ErrorMessage.js
    └───style
            footer.scss
            header.scss
            index.scss
            reset.scss

My only entry point is index.js that initializes the application. index.scss is imported in App.js.

It all worked well before I moved the styling for ErrorMessage to a separate component.

Here's my webpack configuration:

const path = require('path');
const autoprefixer = require('autoprefixer');

module.exports = [{
  entry: {
    app: ['@babel/polyfill', './index.js']
  },
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    path: path.resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: ['@babel/plugin-proposal-class-properties'],
              presets: ['@babel/preset-env']
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css',
            },
          },
          { loader: 'extract-loader' },
          { loader: 'css-loader' },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()]
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                includePaths: ['./node_modules']
              }
            }
          }
        ]
      }
    ]
  },
}];

What I'm trying to do is import the styling for that component directly to ErrorMessage.js but still have it compiled to bundle.css and keep the single entry point. However, when I run the webpack build, it only compiles error.css to the bundle.css file. Is there a way to parse all the .scss files like that?

Answer 1

Why dont you just create 1 entry point scss file then include everything into that scss file ? Then you just need to import that entry file into your js file

Below is my webpack config for your reference

plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }