Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inline CSS with Webpack, without HtmlWebpackInlineSourcePlugin?

Tags:

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


}
like image 736
Slbox Avatar asked Apr 28 '20 21:04

Slbox


1 Answers

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.

like image 89
Slbox Avatar answered Oct 12 '22 03:10

Slbox



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!