antD使用二三事-设置主题色 && 不同组件间对antD的样式修改互不干扰

设置主题色

前期准备：

npm install babel-plugin-import --save-dev
npm install antd --save

1. webpack.config.theme.js中，设置主题色primary-color，并导出

module.exports={
    "primary-color": "#0ba29a",
    "link-color": "#0ba29a",
    "border-radius-base": "2px",
}

2. 配置webpack打包规则
在webpack.config.development.js和webpack.config.production.js中同时设置

const modifyVars = require('./webpack.config.theme.js'); //引入主题色设置文件

{
           test: /\.less$/,
           use: [{
               loader: MiniCssExtractPlugin.loader // creates style nodes from JS strings
           }, {
               loader: "css-loader",  // translates CSS into CommonJS
           }, {
               loader: "postcss-loader",
               options: {
                   config: {
                       path: path.resolve(__dirname,"./postcss.config.js")
                   }
               }
           }, {
               loader: "less-loader", // compiles Less to CSS
               options: {
					modifyVars: modifyVars, // 设置
					javascriptEnabled: true
				}
           }]
 }

3. 实现按需加载 .babelrc
为development和production环境分别设置libraryDirectory。

"plugins": [
                [
                    "import",
                    {
                        "libraryName": "antd",
                        "libraryDirectory": "es", // 使用主题色的配置
                        "style": true
                    },
                    "ant"
                ],
                [
                    "import",
                    {
                        "libraryName": "antd-mobile",
                        "style": "css"
                    }, 
                    "antd-mobile"
                ],
]

注：@ant-design/icons-react/es

不同组件间对antD的样式修改互不干扰

依照antD官网，对antD样式的修改应放在:global{}中，但这种修改是全局的修改，项目中ABC三个组件如果都引用了这个anD样式，那么都会受影响。
如果我们希望在A、B、C三个组件中分别对同个antD组件进行修改，怎么做呢
酱酱酱

其实很简单
只需要在className前加上ABC组件内的一个上层层级即可。