Как объединить все файлы .SCSS, импортированные в разные компоненты JS, и вывести их в один пакет .CSS?

Question

Я работаю над проектом, который использует простой JS (без фреймворков) и SCSS и объединяет все это с Webpack.

Структура примерно такая:

│   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

Моя единственная точка входа - index.js, которая инициализирует приложение. index.scss импортируется в App.js.

Все работало хорошо, пока я не перенес стиль для ErrorMessage в отдельный компонент.

Вот моя конфигурация веб-пакета:

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']
              }
            }
          }
        ]
      }
    ]
  },
}];

То, что я пытаюсь сделать, это импортировать стили для этого компонента непосредственно в ErrorMessage.js, но все равно скомпилировать его в bundle.css и сохранить единую точку входа. Однако, когда я запускаю сборку webpack, он компилирует только error.css в файл bundle.css. Можно ли как-то разобрать все файлы .scss?

Answer 1

Почему бы вам просто не создать 1 файл scss точки входа, а затем включить все в этот файл scss? Тогда вам просто нужно импортировать этот файл в ваш js-файл

Ниже приведен мой webpack конфиг для вашей справки

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"
                    }
                ]
            }
        ]
    }