5

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


}
Slbox
  • 10,957
  • 15
  • 54
  • 106

1 Answers1

4

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.

Slbox
  • 10,957
  • 15
  • 54
  • 106
  • Did you use react eject? before customizing this? – Suresh Kumar Jul 06 '20 at 09:00
  • I don't use Create React App, sorry. I think traditional wisdom is that you need to reject, [but maybe you don't have to?](https://dev.to/nodewarrior/override-cra-and-add-webpack-config-without-ejecting-2f3n) I can't give an answer with certainty.. – Slbox Jul 06 '20 at 17:31
  • Yeah I followed that approach after posting this comment. Thanks for the reply :) I am getting 404 error when I hit the generated HTML page. did you face anything like that? – Suresh Kumar Jul 07 '20 at 00:13
  • 1
    I build for [Electron](https://www.electronjs.org/), not web, so I couldn't say. Sorry. – Slbox Jul 07 '20 at 03:04