参考文档：
webpack 配置：
// webpack.config.js
module.exports = {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
options: {
modules: true //开启 CSS Modules
}
}, {
loader: 'less-loader', // compiles Less to CSS
options: {
lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
},
},
}],
// ...other rules
}],
// ...other config
}
重写 Antd 组件样式：
```javascript
// TestPage.ts
import { Select } from 'antd';
import styles from './TestPage.less';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push({i.toString(36) + i});
}
ReactDOM.render(
mode='multiple'
style={{ width: 300 }}
placeholder='Please select'
className={styles.customSelect}>
{children}
,
mountNode
);
```
```less
// TestPage.less
.customSelect {
:global {
.ant-select-selection {
max-height: 51px;
overflow: auto;
}
}
}
```
开启 CSS Modules 后，以 import styles from '**/*.less' 方式引入，以 className={styles.className} 或 className={styles[className]}的形式设置类名的，类名都会生成 Hash 字符串的形式出现在 dom 的 class 里。
而使用:global(.className) { // Your CSS Code... } 或 :global { .className { // Your CSS Code... } }的语法，声明一个全局规则，该 className 不会被编译成哈希字符串。利用该语法实现 Antd 组件样式重写。
注意：上面例子 :global 声明的全局规则 是限定在 customSelect 类下的，这样只在 customSelect 下起作用，不会污染全局。
标签：styles,less,global,Modules,loader,className,Antd,CSS
来源： /jserhub/p/13520006.html
