如何在webpack导入的html文件中使用从index.js导入的样式？

Question

假设我有index.js文件，这是一个主应用程序文件，它从目录导入样式文件，并从其他目录导入html模板，比如：

index.js：

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

Mray.module.css：

.mainBGColor {
  background-color: #25605f;
}

.mainFontColor {
  color: #25605f;
}

.mainSection {
  width: 62.5%;
  display: inline-block;
}

MrayTemplate.html：

<div class="mainBGColor">
  <div class="mainWrapper">
   </div>
</div>

现在，我需要使用从Mray.module.css内部MrayTemplate.html导入的样式，我尝试使用html-loader?interpolate，但是${mRayStyle.mainWrapper}返回错误mRayStyle没有定义。

补充说明：

“css-加载程序”："^3.4.0“、"itk"："^10.2.1”、“原始加载程序”："^4.0.0“、”样式-加载程序“："^1.1.1”、“url-加载程序”："^3.0.0“、"vtk.js"："^13.2.1”、"@babel/core"："^7.7.7“、”@babel/预设-env“："^7.7.7”、“babel-加载程序”："^8.0.6“、”复制-webpack-插件“："^5.1.1”、“咖喱”："^1.2.0“、”kw-web-套件“："^9.0.0”、"webpack"："^4.41.4“、”“：”^3.3.3.10“、”-dev-server“："^3.10.1”、“工人-加载程序”："^2.0.0“

Webpack模块规则：

module: {
rules: [
    { test: /\.html$/, loader: 'html-loader?interpolate' },
    { test: /\.stl/, loader: 'file-loader' },
    { test: /\.(png|jpg)$/, use: 'url-loader?limit=81920' },
    { test: /\.svg$/, use: [{ loader: 'raw-loader' }] },
].concat(vtkRules, cssRules),},

Answer 1

您必须使用HtmlWebpackPlugin。这个插件自动添加css，js，.到html输出的资产。