style-ext-html-webpack-plugin

4.1.3 verified Sat Apr 25 auth: no javascript deprecated

Webpack plugin that converts external CSS links generated by HtmlWebpackPlugin and ExtractTextPlugin or MiniCssExtractPlugin into inline <style> elements in the HTML output. Version 4.1.3 is the final release, supporting Webpack 4.x and HtmlWebpackPlugin 4.x. No longer maintained; does not support Webpack 5. Differentiates from other inlining solutions by specifically targeting CSS extraction patterns.

Common errors

error Error: Cannot find module 'style-ext-html-webpack-plugin' ↓

cause Package not installed or installed globally without local install.

fix

Run 'npm install style-ext-html-webpack-plugin --save-dev' in your project directory.

error TypeError: StyleExtHtmlWebpackPlugin is not a constructor ↓

cause Using import instead of require or forgetting 'new' keyword.

fix

Use 'const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin');' and instantiate with 'new'.

error Error: HookWebpackError: Plugin could not be instantiated ↓

cause Incompatible version of Webpack or HtmlWebpackPlugin.

fix

Ensure you have Webpack 4.x and HtmlWebpackPlugin 4.x installed; check peer dependencies.

Warnings

deprecated Project is no longer maintained. Does not support Webpack 5. Final version is 4.1.3. ↓

fix Consider forking or migrating to alternative solutions like html-webpack-inline-style-plugin or custom HtmlWebpackPlugin hooks.

breaking v4.x requires Node 6 or higher, Webpack 4.x, and HtmlWebpackPlugin 4.x. ↓

fix Upgrade to Webpack 4 and HtmlWebpackPlugin 4 if on v3; or downgrade to v3.x of style-ext-html-webpack-plugin for older setups.

gotcha CSS files using MiniCssExtractPlugin are inlined as <style> tags even if you wanted external links. ↓

fix Do not use this plugin if you want external CSS files; only use for inline styles.

gotcha The plugin may not work with multiple entry points or Hot Module Replacement when using MiniCssExtractPlugin. ↓

fix Test your setup thoroughly; consider using ExtractTextPlugin instead if HMR is required.

Install

npm install style-ext-html-webpack-plugin

yarn add style-ext-html-webpack-plugin

pnpm add style-ext-html-webpack-plugin

Imports

styleExtHtmlWebpackPlugin

wrong

import StyleExtHtmlWebpackPlugin from 'style-ext-html-webpack-plugin';

correct

const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin');

This package exports a CommonJS module; ESM import will fail. Use require().

constructor
wrong
```
new styleExtHtmlWebpackPlugin({ ...options })
```
correct
```
new StyleExtHtmlWebpackPlugin({ ...options })
```
Constructor name is PascalCase; the imported function is the constructor itself.
plugin configuration
wrong
```
plugins: [require('style-ext-html-webpack-plugin')]
```
correct
```
plugins: [new StyleExtHtmlWebpackPlugin()]
```
Must instantiate the plugin with 'new'; passing the function reference does not work.

Quickstart

Minimal webpack configuration with HtmlWebpackPlugin, MiniCssExtractPlugin, and StyleExtHtmlWebpackPlugin to inline CSS as <style> tags.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin');

module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin(),
    new StyleExtHtmlWebpackPlugin()
  ]
};