问题
There are some HTML chunks as strings in my JS file. For example:
`<span class="${currentIndex === index ? 'right' : ''} ${get(item, 'observed') === true ? 'observed' : ''}"
data-index="${index}" data-item-id="${get(item, 'id')}">
<b style="animation-duration:${get(item, 'length') === '' ? '200' : get(item, 'length')}s"></b>
</span>`
The SCSS files are also imported in the JS file and the bundling works perfectly. But, when I try to enable the "modules: true" option in the css-loader, the class names do not get changed in the HMTL output build, but the names change in the css section of the bundle. FOllowing is my webpack configuration
module: {
rules: [
//scss
{
test: /\.scss$/i,
use: [
{
loader: "style-loader"
},
{
loader: 'css-loader',
options: {
// modules: true,
// sourceMap: true,
// importLoaders: 1,
}
},
{
loader: 'sass-loader',
options: {
modules: true
}
},
]
},
//js
{
test: /\.js$/i, exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env', {
'targets': {'browsers': ['ie 6', 'safari 7']},
"corejs": 3, // default would be 2
'useBuiltIns': "usage"
}]],
plugins: ["@babel/plugin-proposal-class-properties"]
}
}
}
]
}
来源:https://stackoverflow.com/questions/63956885/making-css-loader-class-names-hashing-work-for-html-as-strings