用于返回CSS样式的Webpack加载程序？

Question

我想通过内联渲染一些样式来减少关键路径CSS。目前，我正在使用这样的CSS模块：

import styles from './Componentstyles.scss';

...

<div className={styles.cls}>

我正在做SSR，我希望所有样式都可以内嵌在SSR中。即对于SSR，我希望在样式属性中使用样式，而不是使用类+外部CSS文件。

是否有现成的装载机可以做到这一点？

我的Webpack配置的相关部分如下：

  {
    test: /\.s?css$/,
    include: [APP_ROOT],
    exclude: [/node_modules/],
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
          modules: true,
          localIdentName: '[path][name]__[local]',
        },
      },
      'postcss-loader',
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
            path.resolve('./src/styles/imports/variables.scss'),
            path.resolve('./src/styles/imports/mixins.scss'),
          ],
        },
      },
    ],
  },