react中引入less并支持antd主题换肤方式
更新时间：2024年01月24日 10:24:25 作者：土豆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",
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了React实现导入导出Excel文件，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
这篇文章主要介绍了原生+React实现懒加载(无限滚动)列表方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
基于CSS实现MaterialUI按钮点击动画并封装成 React 组件
笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue, iView等成熟的UI框架, react生态的ant-design, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和复杂度,使开发者更专注于实现业务逻辑和服务化2021-11-11
这篇文章主要介绍了React 18版本配置rem 和 vw的详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
使用react-native-image-viewer实现大图预览
这篇文章主要介绍了使用react-native-image-viewer实现大图预览，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
基本路由跳转是最常见的一种方式,下面介绍React 中常用的几种路由跳转方式,感兴趣的朋友一起看看吧2023-12-12
解决React报错Expected `onClick` listener to be a function
这篇文章主要为大家介绍了React报错Expected `onClick` listener to be a function解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家介绍了React 时间切片理解分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要给大家介绍了关于React如何将组件渲染到指定DOM节点的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习下吧。2017-09-09
这篇文章主要介绍了react-rnd靠右显示的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-05-05
最新评论