使用Webpack构建样式标签

Question

在我的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>

有什么办法吗？ 我阅读了文档，但是只提到了构建CSS输出文件，而不是以这种方式输出到样式标签。

原因：

我正在发布要通过NPM / Bower包含的模块，我宁愿将构建作为单个程序包保留，而不必还原到
它更快。 关于减少请求数量的文献很多，包括来自webpack的请求： https : //github.com/christianalfoni/react-webpack-cookbook/wiki/Inlining-images

Answer 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

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

Answer 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>

使用Webpack构建样式标签

问题描述

2 个解决方案

解决方案1
1 2015-11-17 16:12:07

解决方案2
1 2015-11-17 22:36:04

使用Webpack构建样式标签

问题描述

2 个解决方案

解决方案1 1 2015-11-17 16:12:07

解决方案2 1 2015-11-17 22:36:04

解决方案1
1 2015-11-17 16:12:07

解决方案2
1 2015-11-17 22:36:04