使css-loader类名称对HTML作为字符串进行哈希运算

问题描述

我的JS文件中有一些HTML块作为字符串。例如：

 `<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>`

SCSS文件也导入到JS文件中，并且捆绑可以完美地工作。但是，当我尝试在css-loader中启用“ modules：true”选项时，类名称在HMTL输出版本中不会更改，但名称在包的css部分中会更改。以下是我的webpack配置

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"]

                    }
                }
            }
        ]
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）