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>

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

原因：

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

Answer 1

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

<div class="product-description rte" itemprop="description">
  <p>Main Description</p>
  <p><strong>My titles here</strong><br> then some more description 
    <div class="tab-area">
        <ul class="tabs">
           <li class="single-tab">
             <a    href="#tab1" class="active" data-activator="#tab1">
               <h5><strong>First Tab</strong></h5>
             </a>
           </li>
           <li class="single-tab">
             <a href="#tab2" data-activator="#tab2" class="">
               <h5><strong>Second Tab</strong></h5>
             </a>
           </li>
        </ul>
     <div class="tab-content" id="tab1" style="display: block;">
        <p>Some mor info here</p></div><div class="tab-content" id="tab2"     style="display: none;">
        <ul>
            <li>some line content here</li>
        </ul>

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

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

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

Answer 2

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

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 个答案: