首页 » 技术文章 » 正文

react中antd-mobile和Ant Design定制主题详解 如何加载less-loader

简介

在最初学react时使用阿里的antd-mobile修改默认主题样式和组件按需加载这两个问题配置了好久,今天做项目又使用到了需改主题样式,还是搞了好久才解决了,感觉收获不小!其中两个难点是eject导出webpack.config.js的配置和加载less-loader问题。下面拿antd-mobile写的文章,Ant Design定制主题也是一样的。

webpack配置less-loader

首先按照文档主题定制安装所需的插件:

接下来,配置 babel-plugin-import 确保加载 antd-mobile less 文件,因为antd-mobileAnt Design是less写的(我们平时使用的是编译好的css文件)现在我们要修改默认配置,我们需要用less覆盖默认配置,修改配置环境(webpack.config.js):

添加less-loader

配置less-loader的options

在react的旧版本中less-loader配置options:

现在的react配置options,找到getStyleLoaders函数,这个函数是专门处理css样式的:

webpack中babel的配置

babel原来配置都是在.babelrc文件,现在,在package.json里面的最下面:

改为,这里可以进行babel的配置,相当于webpack的.babelrc文件:

最后

此时就完全OK了,而且不需要再配置按需加载了,现在就已经是按需加载了,你自己可以试试!!

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据