是否可以使用构建过程随机散列类？答案

【问题标题】：Is it possible to randomly hash classes with build process?是否可以使用构建过程随机散列类？
【发布时间】：2021-04-08 06:20:33
【问题描述】：

我正在开发环境中做这样的事情。

import "./main.css"

    const App = () =>  <div className="foo-bar-baz"> <h1>Hello react</h1> </div>

现在我构建了这个，我得到了如下所示的输出。

<div class="foo-bar-baz"> <h1>Hello react</h1> </div>

但这不是我想要的。我希望对类名进行哈希处理。喜欢这个

<div class="fx09_jnm_1 _Y1gn2f"> <h1>Hello react</h1> </div>

我该怎么做？

【问题讨论】：

抱歉，没听懂？你能准确解释你想要什么吗？如果您的 className 更改为 hashed，您也应该更改 CSS！
你到底想要什么，我知道你的类名会被散列。所以请注意它是否会帮助您解决问题github.com/webpack-contrib/css-loader#localidentname
要获得散列的类名，您需要使用 webpack 配置 css-modules。这应该有助于robinwieruch.de/react-css-modules 然后就像@RaghulSK 说你可以使用github.com/webpack-contrib/css-loader#localidentname 来配置你希望你的类如何被散列
是的。我认为这对我有用
@heisanbug，实际上，我怎样才能在 CRA 中做到这一点github.com/webpack-contrib/css-loader#localidentname？ “npm runeject”不运行

标签： javascript html css reactjs webpack

【解决方案1】：

它是固定的。但是在运行“npm runeject”之后，我在 config/webpack.config.js 文件中做了如下配置

现在还有一个问题。不运行“npm runeject”有没有办法做到这一点？

{
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                localIdentName:'__[hash:base64:5]',
              }),
              sideEffects: true,
            },
            {
              test: /\.css$/,
              use: [
                {
                  loader: 'style-loader'
                },
                {
                  loader: 'css-loader',
                  options: {
                    importLoaders: 1,
                    modules: {
                      localIdentName: '[hash:base64:5]__[hash:base64:5]___[hash:base64:5]'
                    }
                  }
                }
              ]
            },

npm run eject
npm i classnames --save

在你的组件中

import styles from 'main.module.css'
import classnames from 'classnames/bind'


const cx = classnames.bind(styles) 


return (
 
<div className={ cx('foobar') } > .... </div>
)

【讨论】：