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

Question

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

＆＃xA;＆＃xA;

我的问题的症结在于CSS配置的一部分。目前，我正在使用其相关React组件中的绝对文件路径导入SCSS文件。但是在渲染时，每个单独的CSS导入都会获得自己的＆lt; style＆gt; 标记，从而导致在我的Web应用程序的头部散布着十几个＆lt; style＆gt; 标记。有没有办法调整配置，使输出的CSS进入一个＆lt; style＆gt; 标签？也许可以按照特定条目进入我的应用程序的React加载序列：

＆＃xA;＆＃xA;

 条目：{＆＃xA; app：[＆＃xA; '＆lt; React Component是渲染树的顶部＆gt;'，＆＃xA; ]，＆＃xA;}，＆＃xA;  

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

  const webpack = require（'webpack'）;＆＃xA; const config = require（'./ webpack.client.base.config'）;＆＃xA;＆＃xA; const devBuild = process.env.NODE_ENV！=='production';＆＃xA;＆＃xA; config.output = {＆＃XA; filename：'[name] -bundle.js'，＆＃xA;路径：'../ app / assets / javascripts / generated'，＆＃xA; publicPath：'/assets/generated/',
};

config.module.loaders.push(
, {＆＃xA; test：/\ .jsx？$ / ，＆＃xA; loader：'babel-loader'，＆＃xA; exclude：/ node_modules /，＆＃xA;}，＆＃xA; {＆＃xA; test：/\.css$/,
 ; loader：'style！css'，＆＃xA;}，＆＃xA; {＆＃xA; test：/\。scss $ /，＆＃xA; loader：'style-loader！css-loader！postcss- loader！sass-loader'，＆＃xA;}＆＃xA;）;＆＃xA;＆＃xA; module.exports = config;＆＃xA;＆＃xA; if（devBuild）{＆＃xA; console.log（'Webpack dev build for Rails'）; // eslint-disable-line no-console＆＃xA; module.exports.devtool ='eval-source-map';＆＃xA;} else {＆＃xA; config.plugins.push（＆＃xA; new webpack.optimize.DedupePlugin（）＆＃xA;）;＆＃xA; console.log（'用于Rails的Webpack生成版'）; // eslint-disable-line no-console＆＃xA;}＆＃xA;  

＆＃xA;＆＃xA;

以下是客户端当前正在发生的事情的屏幕截图： ＆＃xA;

＆＃xA;＆＃xA;

我尝试过使用样式加载器单例选项但它没有工作

＆＃xA ;

Answer 1

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

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

是你在看什么？

使用style-loader?singleton的

（见注释）也可以直接在旧版本中使用。

Answer 2

如果您使用的是样式加载器v1.0.0，则删除了“单个”选项。 您可以改用“ injectType”。

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