Making css-loader class names hashing work for html as strings

╄→гoц情女王★ 提交于 2021-01-29 08:55:59

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!