时间戳

首页 > 解决方案 > 内联 CSS 与 Webpack，没有 HtmlWebpackInlineSourcePlugin？

javascript - 内联 CSS 与 Webpack，没有 HtmlWebpackInlineSourcePlugin？

问题描述

我们一直在使用HtmlWebpackInlineSourcePlugin没有问题，但它不再受支持，所以我们转移到InlineChunkHtmlPlugin对 JS 非常有用的那个，但拒绝捕获输出style.css文件并内联它，让我们没有样式。

有没有办法在不构建粗略的自定义解决方案的情况下内联 CSS？

有许多与我类似的问题，但我找到的所有答案都依赖于现在未维护的HtmlWebpackInlineSourcePlugin插件。

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
  const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');

  module.exports = {
    //  ... our other configuration options, loaders, etc
    plugins: [
      new CleanWebpackPlugin(pathsToClean),
      new MiniCssExtractPlugin({
        filename: 'style.css',
      }),
      new HtmlWebpackPlugin({
        template: './template.html',
        // inject: 'body',
        inject: true,
        filename: './output.html',
        inlineSource: '.(js|css)$',
        chunks: ['chunk'],
     }),
      // new HtmlWebpackInlineSourcePlugin(); // Used to work for loading JS & CSS
      new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]); // Only loads JS, no CSS -- https://openbase.io/js/react-dev-utils
    ],


}

标签： javascriptcssreactjswebpackhtml-webpack-plugin

解决方案

yarn addhtml-inline-css-webpack-plugin--dev

  const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default; // Require the plugin
  // ... 
  // ...
  new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]); // Your existing InlineChunkHtmlPlugin
  new HTMLInlineCSSWebpackPlugin(); // Add this new line after InlineChunkHtmlPlugin

您的所有代码在其他方面都应该相同。希望这可以帮助某人。

推荐阅读