#### antd的less配置不開(kāi)啟css module,但是代碼里面想用css module加載樣式,方便局部改組件原樣式?
?"antd": "^4.18.3",
"webpack": "^5.65.0",
?"less": "^4.1.2",
? ?"less-loader": "^10.2.0",
? ? "postcss-loader": "^6.2.1",
### webpack的module的rules配置
```
? {
? ? ? ? test: /\.css$/,
? ? ? ? use: [
? ? ? ? ? 'style-loader',
? ? ? ? ? 'css-loader',
? ? ? ? ],
? ? ? },
? ? ? {
? ? ? ? test: /\.less$/,
? ? ? ? use: [
? ? ? ? ? 'style-loader',
? ? ? ? ? { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
? ? ? ? ? {
? ? ? ? ? ? loader: 'postcss-loader',
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? loader: 'less-loader', options: {
? ? ? ? ? ? ? lessOptions: {
? ? ? ? ? ? ? ? importLoaders: 1, javascriptEnabled: true,
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ],
? ? ? ? exclude: /node_modules/,
? ? ? },
```
### App組件引入全局樣式,index.less 里@import '~antd/dist/antd.less';,還可以修改antd提供的樣式變量
```
import './index.less';
import 'antd/dist/antd.css';//這個(gè)要引入,不然antd的樣式加載不了
```
然后就可以用import styles from 'path',組件里用className = {styles.name}去加載樣式了