Встроенный CSS с Webpack, без HtmlWebpackInlineSourcePlugin? - PullRequest
Новая
       30

Встроенный CSS с Webpack, без HtmlWebpackInlineSourcePlugin?

1 голос
/ 29 апреля 2020

Мы использовали HtmlWebpackInlineSourcePlugin без проблем, но он больше не поддерживается, поэтому мы перешли на InlineChunkHtmlPlugin, который отлично работает для JS, но отказывается захватывать выходной файл style.css и вставлять его, оставляя нас без styles.

Есть ли какой-нибудь способ встроить CSS без построения грубого пользовательского решения?

Есть много вопросов, похожих на мои, но все ответы, которые я нашел, полагаются на теперь не поддерживаемые HtmlWebpackInlineSourcePlugin плагин. 

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


}

1 Ответ

2 голосов
/ 03 мая 2020

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

В остальном весь ваш код должен быть одинаковым. Надеюсь, это кому-нибудь поможет.

...