是否可以通过构建过程随机 hash 类？

Question

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

import "./main.css"

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

现在我构建了这个，我得到了一个 output，如下所示。

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

但这不是我想要的。 我希望对 class 名称进行哈希处理。 像这样

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

我怎样才能做到这一点？

Answer 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>
)