如何在require.context之后和加载器之前将scss文件组合在一起，而不是在其中使用@import？

在使用require.context加载scss文件之后，可以通过使用webpack的插件来将这些scss文件组合在一起，而不是使用@import来引入。

一种常用的插件是mini-css-extract-plugin，它可以将scss文件编译为单独的css文件。首先，需要安装该插件：

npm install --save-dev mini-css-extract-plugin

然后，在webpack配置文件中引入该插件，并在plugins中进行配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  // ...
};

接下来，在使用require.context加载scss文件的地方，可以通过使用require.context的keys方法获取到所有的scss文件路径，并将它们传递给MiniCssExtractPlugin.loader来进行编译：

const scssFiles = require.context('./path/to/scss/files', true, /\.scss$/);
scssFiles.keys().forEach(scssFiles);

这样，webpack会将所有的scss文件编译为单独的css文件，并将其与其他的打包文件分离开来。

需要注意的是，使用mini-css-extract-plugin插件时，需要将style-loader从配置中移除，因为它与MiniCssExtractPlugin.loader是互斥的。

这种方式的优势是可以提高页面加载速度，因为将样式文件与其他文件分离开来可以并行加载。此外，还可以方便地进行样式的管理和维护。

推荐的腾讯云相关产品：无