css 模块保留原始类名 nextJS

Question

next 的输出生成一个 classname_hash， 如何配置（通过 webpack）以便除了 classname_hash 之外还保留原始类名？

我仍然想使用 CSS 模块来受益于它的所有优点，但由于其他原因也保留原始的类名。

import styles from '../styles.module.css'
...
    <div className={styles.hello}>Hello World</div>
...

没有任何改变，它省略了：

    <div class="hello__Ux3Zx">Hello World</div>

有没有办法配置 webpack 让它们都像这样？

    <div class="hello__Ux3Zx hello">Hello World</div>

Answer 1

我不知道如何在 next.config 中具体配置它，但还有另一种解决方案。它还存储类名，但该类将是全局的。 所以这既是优点也是缺点。如果您用相同的类命名 A 组件，则您之前为该类设置的样式也将应用于该 A 组件

.container_hello {
//some styles

  :global(.hello) {
   //some styles
  }
}

or

:global(.hello) {
 //some styles
}

在 html dom 中它看起来像这样

 <div class="container_hello__Ux3Zx">
   <div class="hello">Hello World</div>
 </div>

 <div class="hello">Hello World</div>