使用 webpack 构建样式标签答案

【问题标题】：Build to style tag using webpack使用 webpack 构建样式标签
【发布时间】：2016-02-19 01:55:46
【问题描述】：

在我的 webpack 项目中，我想使用 JavaScript 将样式作为 <style> 标签注入页面，而不是通过 <link> 标签引用外部文件。我目前使用style-loader作为样式，它会在头部输出一堆链接标签。

而不是这样：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/things">
    <link rel="stylesheet" type="text/css" href="/things">
    <link rel="stylesheet" type="text/css" href="/things">
  </head>
  <body>

我想要这个：

<html>
  <head>
  </head>
  <style>
    /* things here */
  </style>
  <body>

有没有办法做到这一点？我读过documentation，但它只提到了构建CSS输出文件，而不是以这种方式输出到样式标签。

原因：

我正在发布一个要通过 NPM/Bower 包含的模块，我宁愿将构建保留为单个包，而不必恢复为
速度更快。有很多关于最小化请求数量的文献，包括来自 webpack：https://github.com/christianalfoni/react-webpack-cookbook/wiki/Inlining-images

【问题讨论】：

标签： css webpack

【解决方案1】：

事实证明，手动将加载器添加到导入中可以解决问题。从 webpack 配置中移除这个加载器定义：

 module: {
    loaders: [{
        test: /\.scss$/,
        loaders: ['style!css!sass!']
    }]
}

并手动添加到每个样式导入：

import React from 'react';
import 'style!css!sass!./fieldList.scss'; // -> this line

class FieldList extends React.Component

这会导致样式以我喜欢的方式注入。

【讨论】：

【解决方案2】：

尝试为样式使用第二个入口点。所有样式都会先加载，然后添加到<head>部分的<style>标签中。

webpack.config.js：

export default {
  entry: {
    app: ['./app'],
    styles: ['./styles']
  },
  loaders: [{
    test: /\.(scss|css)$/,
    loaders: [
      'style',
      'css',
      'autoprefixer?browsers=last 3 versions',
      'sass'
    ]
  }]
}

index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="styles.js"/>
</head>
<body>
  <script src="app.js"/>
</body>
</html>

【讨论】：

谢谢。这也是我想做的，但是当我将转换移动到loader 配置时，它再次使用了<link> 标签。目前不确定为什么会这样。
此外，由于您的答案与我的答案一致，就目前而言，最好作为对我的答案的评论，而不是新的答案。我建议您修改您的答案，使其更加独立。