如何强制webpack将纯CSS代码放入HTML head的style标签中?

netdjw

我有这个webpack.config

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineStylePlugin = require('html-webpack-inline-style-plugin');
const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: [
      './src/scss/main.scss'
    ]
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '',
    filename: 'js/[name].js'
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      })
    ]
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'css-loader',
          'sass-loader',
        ]
      },
      // ... other stuffs for images
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/main.html',
      filename: 'main.html'
    }),
    new HtmlWebpackInlineStylePlugin()
  ]
};

我尝试了这种配置,但是效果不佳,因为CSS代码已生成到main.css文件中。

但是,如果我将CSS代码直接<head>作为写入CSS代码<style>,则可以正常工作。

如何设置webpack,将文件中CSS代码Sass放入HTML内联CSS中?

还是有一个勾号将CSS首先放入中,<head>然后html-webpack-inline-style-plugin插件可以解析它?

在仅使用样式加载器之前,我已经完成了此操作,默认情况下,样式加载器会将您的css添加为<head>标签中的样式内联这将不会生成任何输出CSS文件,只会使用您所有的样式创建一个/多个样式标签。

webpack.config.js

module.exports = {
  //... your config

  module: {
    rules: [
      {
        test: /\.scss$/, // or /\.css$/i if you aren't using sass
        use: [
          {
            loader: 'style-loader',
            options: { 
                insert: 'head', // insert style tag inside of <head>
                injectType: 'singletonStyleTag' // this is for wrap all your style in just one style tag
            },
          },
          "css-loader",
          "sass-loader"
        ],
      },
    ]
  },

  //... rest of your config
};

index.js入口点脚本

import './css/styles.css';

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将HTML代码放入.resx资源文件中?

如何将多行代码放入format.html块中?

如何将html代码放入jQuery或JavaScript的附加内容中?

我可以将jquery代码放入一堆纯JavaScript代码中吗?

如何将PHP代码放入jQuery函数中

如何将 PHP 代码放入 JavaScript 中?

如何将.vue文件中的所有CSS代码放入一个.css文件中?

我可以将Google Analytics(分析)代码放入Android webview应用的html文件中吗?

难以将 javascript 代码放入 html 页面的刷新中

如何将JavaScript代码放入Java String变量中

如何将重复的jQuery代码放入子例程或函数中?

如何在变量为空时将此静态html代码放入php中

如何在不花费太多时间对其进行转义的情况下将长长的html代码放入变量中

将Google Analytics(分析)代码放入JS文件中

将执行时序代码放入函数OpenCV中?

将代码放入函数中时a未定义

将所有代码放入函数中

将jsonAsync代码放入单独的类中... Android

CSS模块在禁用了sourceMap的head标签中将CSS作为<style>标签导出

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

如何将html代码放在html的代码块中?

如何在Jsoup解析中避免围绕html head标签

为什么在 HTML 文件的 `<head>` 中声明了 `<style>`?

在head标签中包含css文件,而无需外部库

如何将格式化的代码放置在html中的占位符中

如何在flutter web中修改<head>标签

如何在 iframe 的 head 标签中附加元素?

AngularJS如何从ng-view的模板中插入head标签

如何将html标签放入标签columnheader中?