react-scripts的css modules

    用create-react-app創建的項目基於react-scripts內建支持css modules,需要把css文件名改成filename.module.css,導入方式需要改成:

import styles from './Button.module.css'; // Import css modules stylesheet as styles

   class定義方式改成了:

<button className={styles.error}>Error Button</button>

    編譯後這個error class被唯一化:

<button class="Button_error_ax7yz"></div>

    對比其他web框架的CSS組件隔離渲染,這個方案的弊病:導入語句和html代碼都是強侵入。還有一個問題當文件名中間加了.module以後,就必須用上面的和導入方式,用styles.className方式定義class了,否則css Modules編譯完,不加編譯後處理的classname就無效了,這可真是強耦合的一個糟糕設計,just fro implemention。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章