React配置Less和antd的自定义主题

1.安装 less, less-loader
 

   由于高版本的less和less-loader似乎和Webpack有不兼容的问题，在这里我是指定了版本安装。

    npm install [email protected] --save

    npm install [email protected] --save 

2.安装antd   

 npm install antd --save  

3.实现antd按需加载

为了实现对antd这个库的按需加载效果，我们还需要安装一个叫做babel-plugin-import的库 。

npm install babel-plugin-import --save 

 这个插件需要配置，而且配置项中有一个需要格外注意。 不过要在react脚手架创建出的项目中配置，还需要先执行弹出命令。

yarn eject 

  如果报错，那么需要先执行这三句命令，初始化git仓库。

git init

git add .

git commit -m 'init'

成功弹出配置后，在config文件夹里面的webpack.config.js中第426行的plugin数组里面添加这么一项：

[ require.resolve('babel-plugin-import'), { libraryName: 'antd', "libraryDirectory": "es", style: true } ],

 这一句就是引入了babel-plugin-import插件，不过这个插件还有需要注意的地方。

• style的属性为true的时候加载未编译为css的less，也就可以改变主题
• 如果style：“css”就是加载编译好的css，无法更改主题

 而我们后面还需要配置antd的定制主题，所以需要把style改为true。 

4.配置less使得react能够使用less 

//在webpack.config.js第65行后面加上这两句代码
const lessRegex= /\.less$/;
const lessModuleRegex=/\.module\.less$/;

 

// 在webpack.config.js的第550行后面添加这两段代码
 {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                  {
                    importLoaders: 3,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                  },

                  'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                  {
                    importLoaders: 3,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                    modules: {
                      getLocalIdent: getCSSModuleLocalIdent,
                    },
                  },
                  'less-loader'
              ),
},

  这样子，重启react项目之后，就可以使用less文件了。

5.配置antd自定义主题

 

// 在webpack.config.js第158行代码后面添加这一段代码
    //新增代码
   let loader = require.resolve(preProcessor);
    if(preProcessor === 'less-loader'){
        loader = {
            loader,
            options:{
              modifyVars:{
                '@primary-color': '#1DA57A'
              },
              javascriptEnabled:true
            }
        }
}
      loaders.push(loader);

 这句话就修改了antd中的less变量，下面给出一些常用的antd变量。

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影

 这样子就配置成功了Less且可以自定义antd主题。