Search code examples
javascriptcssreactjswebpackhtml-webpack-plugin

Inline CSS with Webpack, without HtmlWebpackInlineSourcePlugin?


We had been using HtmlWebpackInlineSourcePlugin without issue but it's no longer supported so we moved to InlineChunkHtmlPlugin which works great for JS, but refuses to capture the output style.css file and inline it, leaving us with no styles.

Is there some way to inline CSS without building a crude custom solution?

There's many questions similar to mine, but all answers I've found rely on the now unmaintained HtmlWebpackInlineSourcePlugin plugin.

  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
    ],


}

Solution

  • 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
    

    All of your code should be otherwise the same. Hope this helps someone.