react中引入less并支持antd主题换肤方式
作者：土豆Coder
这篇文章主要介绍了react中引入less并支持antd主题换肤方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
介绍
antd的样式使用了Less作为开发语言，并定义了一系列全部的样式变量，我们可以改变对应变量值来进行相应调整换肤。
react中引入less
要修改webpack配置，首先需要将webpack的配置文件先暴露出来
npm run eject
安装依赖包
npm i less less-loader
然后修改eject出来的webpack.config.js文件
antd主题换肤
修改上面的配置
其中vars.less文件内容为
// vars.less @import '~antd/lib/style/themes/default.less'; @dark-bg: #161626; @primary-color: #56A902; @font-size-base: 12px; @male-color: #3F92FE; @female-color: #FF7D97; @error-color: #cf1322;
以上这些变量都可以在全局.less文件中直接引用，且无需再import该文件。
另外，除了加载指定路径外，也可以直接覆盖主题变量，同样生效。
{
test: /\.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader',
options: {
modifyVars: {
'primary-color': '#0f0'
}
}
}]
},
报错1
那一定是你的路径写的不对，好好检查一下。
版本号
因为这些个依赖总是随时更新，然而每次更新都会出现新的报错，也不给出个具体方案，所以这里的版本号请参考下表
// package.json "antd": "^4.0.1", "less": "2.7.2", "less-loader": "^5.0.0", "react": "^16.13.0",
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。