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

【问题标题】：Webpack loading CSS into individual <style> tagsWebpack 将 CSS 加载到单独的 <style> 标签中
【发布时间】：2017-11-02 20:52:40
【问题描述】：

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

我的问题的症结在于配置的 CSS 部分。目前，我正在使用其相关 React 组件中的绝对文件路径导入 SCSS 文件。然而，在渲染时，每个单独的 CSS 导入都会有自己的 <style> 标签，这会导致我的 Web 应用程序头部散落一打 <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
}

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

我尝试过使用style-loader singleton option，但没有成功

【问题讨论】：

你如何使用css，从'aaa.css'导入s？还是导入'aaa.css'？
对于 .css 也使用 'style-loader'
@UXDart 导入'aaa.scss'。是的，我在测试中使用了样式、css、postcss 和 sass 加载器的组合
出于好奇，这有什么关系？
@ceejayoz 我正在尝试根据一些包含/排除规则将我所有的 CSS 捆绑在一起，然后我可以将它们换成不同的 CSS 包:)

标签： webpack webpack-style-loader css-loader sass-loader

【解决方案1】：

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

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

那是你在看的吗？

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

【讨论】：

这是正确的答案——但是，我希望您可以修改一下，对于旧版本的style-loader，执行style-loader?singleton 是另一种尝试方式。请注意，内联查询也将支持对象 - 但仅在 GitHub 上的 webpack-contrib/style-loader 下支持

【解决方案2】：

如果您使用的是 style-loader v1.0.0，则删除了“singleton”选项。您可以改用“injectType”。

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

【讨论】：