如何合并所有导入到不同 JS 组件的 .SCSS 文件并将它们输出到单个 .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 的样式移到单独的组件之前，一切都运行良好。

这是我的 webpack 配置：

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