React配置less与antd定制主题

2

一、配置less

在配置less之前,我使用create-react-app,得到React版本为^16.8.6

  1. 安装依赖并解构目录:(可以在命令前加sudo确保不会出现权限问题)
yarn add babel-plugin-import 或 npm install babel-plugin-import
yarn less-loader 或 npm install less-loader
yarn eject 或 npm run eject

解构后,我得到的webpack版本为4.28.3config文件夹长这样:
图片描述

于是,打开webpack.config.js修改配置:
在第42行附近修改代码为:

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;    //新增
const lessModuleRegex = /\.module\.less$/;    //新增

在第327行附近修改代码为:

oneOf: [
    {
        ...//其他配置
    },
    ...//其他配置
    
    //配置less-loader(新增)
    {
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
    },
    {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
      ),
    },
    //EndOf配置less-loader(新增)
    
    ...//其他配置
]

二、配置antd定制主题

修改package.json

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ],
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true    //这里是 true 不是 'css'
        }
      ]
    ]
  }
  

webpack.config.js第110行附近修改代码为:

if (preProcessor) {
  let loader = {
    loader: require.resolve(preProcessor),
    options: {
      sourceMap: isEnvProduction && shouldUseSourceMap,
    }
  }
  if (preProcessor === "less-loader") {    //新增
    loader.options.modifyVars = {
      'primary-color': '#1DA57A',
      'link-color': '#1DA57A',
      'border-radius-base': '2px'
    }
    loader.options.javascriptEnabled = true
  }    //EndOf新增
  loaders.push(loader);
}

最后,看到按钮变色就是成功啦!更多样式修改可以看文档~
图片描述

完~若有不足,请多指教,万般感谢!

你可能感兴趣的

Mr赵 · 4月26日

你好,我和你的版本一样,但是按照你的配置控制台'modifyVars' of undefined;请问这个是什么意思?怎么处理?

回复

0

请问完整错误信息是怎样的?猜测意思是modifyVars没被正确赋值,所以它依旧是默认undefined值

晓铃檬 作者 · 4月27日
载入中...