src/index.html
src/layout/header.html
src/css/common/iconfont.css

head.html:
<link rel="stylesheet" href="@styles/common/iconfont.css">
index.html:
<%~ include('layout/header.html',{title:title}) %>
webpack config:

module.exports = (env, argv) =>{
  const isProd = argv.mode === 'production';

  return {
    mode: argv.mode,
    devtool: isProd?'hidden-source-map':'eval-cheap-module-source-map',   
    output: {
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
    resolve: {
      alias: {
        '@scripts': path.join(__dirname, 'src/js/'),
        '@styles': path.join(__dirname, 'src/css/'),,
        '@fonts': path.join(__dirname, 'src/fonts/'),
      },
    },
    plugins:[
      new HtmlBundlerPlugin({
        entry: {
          index: {
            import: path.join(__dirname, 'src/index.html'),
            data: { title: 'index' },
          },
          contact:{
            import: path.join(__dirname, 'src/page-contact.html'),
            data: { title: 'contact' },
          }
        },
        preprocessor: 'eta',
        preprocessorOptions: {
          views: path.join(__dirname, 'src'),
        },
            js: {
              filename: 'js/[name].[contenthash:8].js',
              inline: {
                chunk: [/runtime.+[.]js/],
              },
            },
            css: {
              filename: 'css/[name].[contenthash:8].css',
            },
            minify: {
              removeComments: true,
              collapseWhitespace: false, 
              minifyJS: true, 
              minifyCSS: true,
            },
          }),
    ],
    module:{
      rules: [
          {
            test: /\.(ico|png|jp?g|svg)$/,
            type: 'asset',
            parser:{
              dataUrlCondition:{ maxSize: 10*1024 }
            },
            generator:{
                filename: 'images/[name].[hash:8][ext]',
            },
          },
          { 
            test: /\.css$/i, 
            use: [
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: [['postcss-preset-env']],
                  },
                },
              }
            ],
          }
      ]
    },
    devServer: {
      static: path.join(__dirname, 'dist'), 
      watchFiles: {
        paths: [ path.join(__dirname, 'src/**/*.*') ],
        options: {
          usePolling: false,
        },
      },
    },
    optimization: {
      splitChunks: {
        minSize: 30,              
        cacheGroups: {           
            default: {  
                name: 'commons',  
                chunks: 'all',  
                minChunks: 2,   
                priority: -20, 
            },
            vendors: {                            
              test: /[\\/]node_modules[\\/]/,   
              name: 'vendor',                   
              chunks: 'all',
              priority: -10                    
            }
        },
      },
    },
  };
}

error:

PluginException:
HTML Bundler Plugin Can't resolve D:\webpack\src\css\common\iconfont.css in the file src\page-contact.html
The handling of @import at-rules in CSS is not supported. Disable the 'import' option in 'css-loader':
{
  test: /\.css$/i,
    use: [
      {
        loader: 'css-loader',
        options: {
        import: false, // disable @import at-rules handling
      },
    },
  ],
},

When I run dev, an error occurs. How can I modify and solve it? It seems that there is an error in the alias reference to the css when packaging.

Only index.html runs normally, but when page-contact.html (including header.html and footer.html) is added and run, an error is reported.

src/index.html
src/layout/header.html
src/css/common/iconfont.css

head.html:
<link rel="stylesheet" href="@styles/common/iconfont.css">
index.html:
<%~ include('layout/header.html',{title:title}) %>
webpack config:

module.exports = (env, argv) =>{
  const isProd = argv.mode === 'production';

  return {
    mode: argv.mode,
    devtool: isProd?'hidden-source-map':'eval-cheap-module-source-map',   
    output: {
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
    resolve: {
      alias: {
        '@scripts': path.join(__dirname, 'src/js/'),
        '@styles': path.join(__dirname, 'src/css/'),,
        '@fonts': path.join(__dirname, 'src/fonts/'),
      },
    },
    plugins:[
      new HtmlBundlerPlugin({
        entry: {
          index: {
            import: path.join(__dirname, 'src/index.html'),
            data: { title: 'index' },
          },
          contact:{
            import: path.join(__dirname, 'src/page-contact.html'),
            data: { title: 'contact' },
          }
        },
        preprocessor: 'eta',
        preprocessorOptions: {
          views: path.join(__dirname, 'src'),
        },
            js: {
              filename: 'js/[name].[contenthash:8].js',
              inline: {
                chunk: [/runtime.+[.]js/],
              },
            },
            css: {
              filename: 'css/[name].[contenthash:8].css',
            },
            minify: {
              removeComments: true,
              collapseWhitespace: false, 
              minifyJS: true, 
              minifyCSS: true,
            },
          }),
    ],
    module:{
      rules: [
          {
            test: /\.(ico|png|jp?g|svg)$/,
            type: 'asset',
            parser:{
              dataUrlCondition:{ maxSize: 10*1024 }
            },
            generator:{
                filename: 'images/[name].[hash:8][ext]',
            },
          },
          { 
            test: /\.css$/i, 
            use: [
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: [['postcss-preset-env']],
                  },
                },
              }
            ],
          }
      ]
    },
    devServer: {
      static: path.join(__dirname, 'dist'), 
      watchFiles: {
        paths: [ path.join(__dirname, 'src/**/*.*') ],
        options: {
          usePolling: false,
        },
      },
    },
    optimization: {
      splitChunks: {
        minSize: 30,              
        cacheGroups: {           
            default: {  
                name: 'commons',  
                chunks: 'all',  
                minChunks: 2,   
                priority: -20, 
            },
            vendors: {                            
              test: /[\\/]node_modules[\\/]/,   
              name: 'vendor',                   
              chunks: 'all',
              priority: -10                    
            }
        },
      },
    },
  };
}

error:

PluginException:
HTML Bundler Plugin Can't resolve D:\webpack\src\css\common\iconfont.css in the file src\page-contact.html
The handling of @import at-rules in CSS is not supported. Disable the 'import' option in 'css-loader':
{
  test: /\.css$/i,
    use: [
      {
        loader: 'css-loader',
        options: {
        import: false, // disable @import at-rules handling
      },
    },
  ],
},

When I run dev, an error occurs. How can I modify and solve it? It seems that there is an error in the alias reference to the css when packaging.

Only index.html runs normally, but when page-contact.html (including header.html and footer.html) is added and run, an error is reported.

• javascript
• npm
• webpack
• webpack-config

• Can you please create a small repo with reproducible issue, then I can help you to configure your project. You can create the issue directly here: github/webdiscus/html-bundler-webpack-plugin/issues – biodiscus Commented Nov 18, 2024 at 10:43
• does the config contain the CSS rule? module: { rules: [{ test: /\.css$/, use: ['css-loader'] }] } – biodiscus Commented Nov 18, 2024 at 10:48
• please provide full webpack configuration – biodiscus Commented Nov 18, 2024 at 10:52

1 Answer 1

The problem is in the splitChunks configuration. Webpack compile all assets in JavaScript modules and split it, including CSS modules defined in HTML. Therefore CSS files are lost.

Solution

Add the test option to every splitChunks.cacheGroups to avoid splitting of CSS files:

  optimization: {
    splitChunks: {
      minSize: 100,
      cacheGroups: {
        default: {
          test: /.+\.(js|ts)$/, // <= split only scripts, excluding style files
          name: 'commons',
          chunks: 'all',
          minChunks: 2,
          priority: -20,
        },
        vendors: {
          test: /[\\/]node_modules[\\/].+\.(js|ts)$/, // <= split only scripts, excluding style files
          name: 'vendor',
          chunks: 'all',
          priority: -10,
        },
      },
    },
  },