HtmlBundlerPlugin编译报错：CSS@import处理及路径解析问题

问题描述 #

使用Webpack结合HtmlBundlerPlugin构建项目时，仅index.html可正常运行，添加包含header.html和footer.html的page-contact.html后，执行dev命令报错。

文件结构 #

src/index.html
src/layout/header.html
src/css/common/iconfont.css
src/page-contact.html

关键代码片段 #

• header.html：

<link rel="stylesheet" href="@styles/common/iconfont.css">

• index.html：

<%~ include('layout/header.html',{title:title}) %>

报错信息 #

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

解决方案 #

1. 修复resolve.alias语法错误 #

原配置中@styles别名后多了一个冗余逗号，导致Webpack无法正确识别别名，修改后：

resolve: {
  alias: {
    '@scripts': path.join(__dirname, 'src/js/'),
    '@styles': path.join(__dirname, 'src/css/'), // 移除多余的逗号
    '@fonts': path.join(__dirname, 'src/fonts/'),
  },
},

2. 配置css-loader禁用@import处理 #

按照报错提示添加import: false选项，同时调整loader执行顺序（loader从右到左执行，postcss-loader需放在css-loader之前，确保先完成CSS转换再解析）：

{ 
  test: /\.css$/i, 
  use: [
    {
      loader: 'css-loader',
      options: {
        import: false, // 禁用css-loader处理@import规则
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [['postcss-preset-env']],
        },
      },
    }
  ],
}

3. 让HtmlBundlerPlugin识别Webpack别名 #

在HtmlBundlerPlugin配置中添加resolve选项，复用Webpack的别名配置，确保插件能解析@styles这类路径别名：

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'),
  },
  resolve: { // 添加此配置
    alias: require('./webpack.config').resolve.alias,
  },
  // 原有js、css、minify配置保持不变
}),

4. 验证page-contact.html的引用格式 #

确保page-contact.html中引入header.html的语法与index.html一致：

<%~ include('layout/header.html',{title:title}) %>

完成以上修改后，重新执行dev命令即可解决报错问题。

内容的提问来源于stack exchange，提问作者Ryan Yang