javascript - Inline CSS with Webpack, without HtmlWebpackInlineSourcePlugin? - Stack Overflow

admin管理员组

文章数量:1022743

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


}

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


}

• javascript
• css
• reactjs
• webpack
• html-webpack-plugin

Share Improve this question Follow asked Apr 28, 2020 at 21:54 SlboxSlbox 13.2k1818 gold badges6565 silver badges135135 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.

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


}

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


}

• javascript
• css
• reactjs
• webpack
• html-webpack-plugin

Share Improve this question Follow asked Apr 28, 2020 at 21:54 SlboxSlbox 13.2k1818 gold badges6565 silver badges135135 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： javascriptInline CSS with Webpackwithout HtmlWebpackInlineSourcePluginStack Overflow