在前端開發中，CSS樣式文件的加載和配置是非常重要的一環。而使用CSS模塊化的方式來進行CSS樣式的加載和配置，則是一個不錯的選擇。CSS模塊化，簡單來說，就是將CSS樣式文件拆分成多個模塊（或稱組件），并將其獨立管理。下面是CSS模塊加載配置的一些方法：

1. 使用webpack配置CSS加載器

//webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
]
},
}

其中，'style-loader'用于將CSS樣式文件打包成JavaScript代碼，并將其插入到HTML頁面中；'css-loader'用于加載CSS文件；'postcss-loader'則是用于自動添加兼容性前綴。

2. 使用CSS Modules加載

//style.module.css
.header {
font-size: 16px;
color: #333;
}
//index.js
import styles from './style.module.css';
const header =
Hello World
;
ReactDOM.render(header, document.getElementById('root'));

其中，'style.module.css'是CSS樣式文件；'import'語句將CSS樣式文件加載到JavaScript文件中；最后，將樣式文件中的類名作為className附加到JSX元素上。

3. 使用CSS-in-JS方式

//styled-components
import styled from 'styled-components';
const Header = styled.h1`
font-size: 16px;
color: #333;
`;
ReactDOM.render(
Hello World
, document.getElementById('root'));

使用styled-components庫，編寫CSS樣式不再是編寫樣式文件，而是直接寫在JavaScript文件中，通過特殊的語法將樣式和組件聯系起來，這就是CSS-in-JS。