CSS Modules

CSS Modules（樣式模塊化）是一種用于模塊化和局部作用域化CSS樣式的技術，讓CSS只在當前組件內生效，避免全局樣式沖突的技術方案

工作原理

• 文件命名：通常以.module.css、.module.less、.module.scss等結尾：例如：index.module.less
• 局部作用域：CSS Modules通過為類名生成唯一的哈希值，確保樣式不會與其他模塊的樣式沖突

/* index.module.less */
.root {background: #fff;
}

每個樣式類名在編譯時會被自動生成一個獨一無二的哈希后綴，編譯后的類名可能變成root__3k2jf_1，只在當前組件內生效

• 模塊化導入：在JavaScript或TypeScript中，可以直接導入CSS Modules文件，并通過對象的形式訪問類名
• 支持組合：CSS Modules允許通過composes關鍵字組合多個類名，實現樣式的復用

.base{padding: 10px;
}
.button{composes: base;background-color: blue;
}

• 與構建工具集成：CSS Modules通常與 Webpack 、Vite等構建工具結合使用，通過配置啟用模塊化功能，例如，在Webpack中可以通過css-loader的modules選項啟用CSS Modules

典型用法

// Button.modules.css

.button {background-color: #007bff;color: white;padding: 10px 20px;border: none;border-radius: 5px;
}.button:hover {background-color: #0056b3;
}

// React 組件中

import React from 'react'
import styles from './Button.modules.css'const Button = () => {<button className={styles.button}>點擊</button>
}
export default Button 

全局樣式

• :global：是CSS Modules（樣式模塊化）的一個特殊語法，用于聲明全局樣式。

.root {...:global {.logo-wrap { ... }}
}

1、.root依然是局部樣式，只在當前組件生效
2、:global里的.logo-wrap這個類名會直接變成全局類名，不會被哈希處理，任何地方都能使用