在Webpack中如何在导入的HTML文件中使用index.js导入的样式？

我来帮你搞定这个问题——你遇到的报错本质是：html-loader在编译HTML模板时，模板里的${mRayStyle.mainBGColor}找不到对应的变量，因为mRayStyle只存在于你的index.js文件中，模板本身的编译上下文里没有这个变量。下面是具体的解决方案：

步骤1：调整Webpack的html-loader配置 #

把原来的html-loader?interpolate改成带选项的配置，启用ES6模板字符串插值并让模板导出为可接收参数的函数：

{ 
  test: /\.html$/, 
  loader: 'html-loader',
  options: {
    interpolate: 'es6', // 开启ES6模板语法，将模板转为函数
  }
}

步骤2：修改HTML模板的变量引用 #

更新MrayTemplate.html，把变量改成从传入的上下文对象中获取（我们约定用styles作为参数名）：

<div class="${styles.mainBGColor}">
  <div class="${styles.mainWrapper}">
  </div>
</div>

小提醒：你当前的Mray.module.css里没有mainWrapper这个类，记得补充它的样式，不然这个div不会有对应的样式效果哦。

步骤3：在index.js中传入样式并渲染模板 #

现在模板会被导出成一个函数，你只需要把mRayStyle作为参数传进去，就能生成带正确类名的HTML字符串了：

import mRayStyle from './styles/Mray.module.css';
import mRayTemplate from './controllers/MrayTemplate.html';

// 调用模板函数，传入样式对象
const renderedHtml = mRayTemplate({ styles: mRayStyle });

// 最后把渲染好的HTML插入到DOM里，比如：
document.body.innerHTML = renderedHtml;

额外检查：确保CSS Module配置正确 #

别忘了确认你的cssRules已经开启了CSS Module功能，这样Mray.module.css的类名才会被正确导出为JS对象：

const cssRules = [
  {
    test: /\.module\.css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true, // 这是开启CSS Module的关键
          localIdentName: '[name]__[local]--[hash:base64:5]', // 可选，自定义编译后的类名格式
        }
      }
    ]
  },
  // 如果有非module的普通CSS文件，也可以加这个配置
  {
    test: /\.css$/,
    exclude: /\.module\.css$/,
    use: ['style-loader', 'css-loader']
  }
];

为什么原来的方法不行？ #

你之前用的html-loader?interpolate是旧的语法，它只会在编译模板时尝试解析模板内的变量，但这些变量必须存在于模板的编译上下文里（而不是index.js的上下文）。通过把interpolate设为'es6'，loader会把模板转换成一个可接收外部参数的函数，这样你就能把index.js里的mRayStyle传给模板使用了。

内容的提问来源于stack exchange，提问作者Anees Hikmat Abu Hmiad