Webpack 将 CSS 加载到单独的 <style> 标签中

Question

我目前正在使用以下 Webpack 配置来导入和解析我在 React 组件中进行的 SCSS 导入。

我的问题的症结在于配置的 CSS 部分。目前，我正在使用相关 React 组件中的绝对文件路径导入 SCSS 文件。但是在渲染时，每个单独的 CSS 导入都有自己的 <style> 标签，这导致我的网络应用程序的头部散落着十几个 <style> 标签。有没有办法调整配置，使输出的 CSS 进入一个 <style> 标签？并且可能在我的应用程序的 React 加载序列中使用以下特定条目：

entry: {
  app: [
    '<React Component that's top of the render tree>',
  ],
},

我可以使用 ExtractTextPlugin 和 style-loader 模块将所有 CSS 提取到一个文件中。但是，这与在客户端实际加载 CSS 本质上不同。

const webpack = require('webpack');
const config = require('./webpack.client.base.config');

const devBuild = process.env.NODE_ENV !== 'production';

config.output = {
  filename: '[name]-bundle.js',
  path: '../app/assets/javascripts/generated',
  publicPath: '/assets/generated/',
};

config.module.loaders.push(
  {
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
  },
  {
    test: /\.css$/,
    loader: 'style!css',
  },
  {
    test: /\.scss$/,
    loader: 'style-loader!css-loader!postcss-loader!sass-loader',
  }
);

module.exports = config;

if (devBuild) {
  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
  module.exports.devtool = 'eval-source-map';
} else {
  config.plugins.push(
    new webpack.optimize.DedupePlugin()
  );
  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}

这是客户端当前发生的情况的屏幕截图：

我试过使用但没用

Answer 1

{
  loader: 'style-loader'
  options: {
    singleton: true
  }
}

来自 https://www.npmjs.com/package/style-loader

这是你要找的吗？

同样（见评论）使用style-loader?singleton可以直接在旧版本中使用。

Answer 2

如果您使用的是 style-loader v1.0.0，"singleton" 选项已被删除。您可以改用 "injectType"。

{
  loader: 'style-loader',
  options: {
    injectType: 'singletonStyleTag',
  }
}

Webpack 将 CSS 加载到单独的 <style> 标签中

Webpack loading CSS into individual <style> tags

webpack

webpack-style-loader

sass-loader

css-loader