webpack html-loader and MiniCssExtractPlugin

[bojanv55]

I'm using setup from getting-started webpack page:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Development',
      template: 'src/index.html'
    }),
    new MiniCssExtractPlugin(),
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true //clean dist folder before each build
  },
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

And this one works OK if I include import './style.css'; at the top of src/index.js. Inside of the produced dest/index.html I get the line where the extracted CSS style is generated as <link href="main.css" rel="stylesheet">.

Now what I want is to remove that line import './style.css'; at the top of src/index.js and use instead of that one <link rel="stylesheet" type="text/css" href="style.css"> that I will place inside the template src/index.html.

When doing this, generated dest/index.html gets correctly the line <link rel="stylesheet" type="text/css" href="b88d04fba731603756b1.css"> and the file dest/b88d04fba731603756b1.css is generated, but it's content is wrong as I get this instead of real css styles:

// extracted by mini-css-extract-plugin
export {};

Is there a way to use html-loader plugin together with MiniCssExtractPlugin, so that I do not need to import css inside js files but instead import it inside html template?

[alexander-akait]

Thank you for creating this issue. However, issues need to follow one of our templates so that we can clearly understand your particular circumstances.

Please help us help you by recreating the issue using one of our templates.

[bojanv55]

• Operating System: Windows 10
• Node Version: v14.15.0
• NPM Version:6.14.8
• webpack Version:^5.44.0
• mini-css-extract-plugin Version:^2.1.0
• html-loader Version:^2.1.2

Expected Behavior

file dest/index.html is generated and links to <link rel="stylesheet" type="text/css" href="b88d04fba731603756b1.css"> and inside that css file there is following content

.loader{
 background-color: red;
}

Actual Behavior

file dest/index.html is generated and links to <link rel="stylesheet" type="text/css" href="b88d04fba731603756b1.css"> and inside that css file there is following content

// extracted by mini-css-extract-plugin
export {};

Code

Gist

[day-xue]

I have the same problem. Have you solved it now 我有同样的问题，现在解决了吗？ But I just generated a more referable translation of a css file style similar to the main one 但是我只是多生成了一个类似楼主的.css文件 样式还是能引用的

[namighajiyev]

I have the same problem too. If I remove MiniCssExtractPlugin from plugins list HtmlWebpackPlugin outputs all css files normally. But with MiniCssExtractPlugin css files became empty just containing only these two lines :

// extracted by mini-css-extract-plugin
export {};

[day-xue]

I have the same problem too. If I remove MiniCssExtractPlugin from plugins list HtmlWebpackPlugin outputs all css files normally. But with MiniCssExtractPlugin css files became empty just containing only these two lines :

// extracted by mini-css-extract-plugin
export {};

并且如果你使用css-loader 打包 会提示 css文件有非法的注释的翻译结果 And if you use CSS-loader to package the CSS file, it will prompt you that the CSS file has an illegal annotation translation result

[maximeRoudier]

I have the same problem, did you find the solution to avoid "// extracted by mini-css-extract-plugin export {};" ?

[F21]

Seeing this issue as well. Are there any work-arounds?

[vankop]

you probably need to add css import in application ( in src/index.js )

[F21]

Ah right. In my case, I don't have a javascript app, I am just using Webpack to process some templates / assets and rewrite the URLs.

[Blackclaws]

Same issue here, this is really weird.

[CornerSyrup]

Looking for solution too, but it seem to be the expected behaviour, including the ~~promotional~~ comment of // extracted by mini-css-extract-plugin https://github.com/webpack-contrib/mini-css-extract-plugin/blob/1ffad9bee322bf289ac2a04823f6876a175ff313/test/enforce-esm.test.js#L20-L23

related issue found

[CornerSyrup]

my solution, partial of my webpack.config.js to exclude prime vue from my project

      {
        test: /\.css$/,
        exclude: /prime(vue|icons).+\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /prime(vue|icons).+\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { emit: false, esModule: false },
          },
          "css-loader",
        ],
      },