Inline CSS with Webpack, without HtmlWebpackInlineSourcePlugin?

Question

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 · Accepted Answer · 2020-05-03 03:56:20Z

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.

answered May 3, 2020 at 3:56

Slbox

13.4k19 gold badges68 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Suresh Kumar Over a year ago

Did you use react eject? before customizing this?

Slbox Over a year ago

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? I can't give an answer with certainty..

Suresh Kumar Over a year ago

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?

Slbox Over a year ago

I build for Electron, not web, so I couldn't say. Sorry.

Collectives™ on Stack Overflow

Inline CSS with Webpack, without HtmlWebpackInlineSourcePlugin?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related