react-ant design mobile - webpack 自定义主题

最近学习react 遇到了这个问题

仅仅是记录问题和解决问题的方法若那啥请移步。。。

若是哪里不足，请指教。。。

根据官网配置自定义主题会报

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

意思是我需要一个加载程序来加载这个文件类型，但是我已经加载了 less-loader

错误的写法

{test: /\.less$/,use:['style-loader','css-loader',{loader: 'less-loader', options: {modifyVars: theme}}]
}

解决：

const theme = require('./package.json').theme

{test: /\.less$/,use:['style-loader','css-loader',{loader: require.resolve('less-loader'),options: {javascriptEnabled: true,modifyVars: theme}}]
}

这样我就能正常使用自定义主题了

全部更改文件

webpack.config.js中

找到 module

module: {rules: [{test: /\.css$/,loader:['style-loader', 'css-loader']}, {test: /\.less$/,use:['style-loader','css-loader',{loader: require.resolve('less-loader'),options: {javascriptEnabled: true,modifyVars: theme}}]}, {test: /\.(png|svg|jpg|gif)$/,loader: 'url-loader',options: {limit: 10000,name: 'img/[name].[hash:7].[ext]'}}, {test:/\.(woff|svg|eot|ttf)\??.*$/,use:['file-loader']}, {test: /\.(js|jsx)$/,loader: 'babel-loader',options: {plugins: [["import", { libraryName: "antd-mobile", style: true }]]},exclude: /node_modules/}]
},

在package.json里加入

"theme": {"brand-primary": "#da4a49","color-text-base": "#3e3e3e"
}

具体方法请看 ant-design-mobile theme官网具体基础主题

要是使用的 react脚手架里的 webpack的话

（1）需要新建一个config-overrite,js文件

（2）

const {
override,
fixBabelImports,
addLessLoader
} = require("customize-cra");
const them = require("./them.json")

// 更改配置 override
module.exports = override(
fixBabelImports("import", {
liraryName: "antd-mobile", style: true // change
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: them
})
)
（3）新建them.json文件

{
"brand-primary": "red",
"color-text-base": "#333"
}
因为使用的是脚手架里webpack 所以需要重新配置webpack 利用override 就可以

react-ant design mobile - webpack 自定义主题相关推荐

react-hooks+Ant Design Mobile中的自定义表单验证
Ant Design Mobile中的表单校验将validator放在 rules 对象中 <Form.Itemname='uName'label='姓名'requiredrules={[{r ...
2020年React Native使用Ant Design Mobile RN组件
Ant Design Mobile RN是一个很优秀的React Native 界面库,可以帮助我们简单方便的开发出漂亮的界面.我在基于0.63版本使用的过程中遇到一些小波折,比如字体无法正常,各种红 ...
使用create-react-app搭建TypeScript+React+Ant Design开发环境
一.使用create-react-app创建一个支持TypeScript+React的开发环境: 要创建一个支持TypeScript的Create React App项目,可以运行: npx crea ...
Ant Design Mobile 5.6.0版本来了
一.Ant Design Mobile介绍 Ant Design Mobile( 官网地址:Ant Design Mobile - Ant Design Mobile ) 是由支付宝设计团队基于蚂蚁集 ...
Ant Design Mobile是什么？
Ant Design Mobile简称antd-mobile,是Ant Design的移动规范的React实现,是一个基于Preact/React/React Native的UI组件库:UI样式高度可 ...
react ant design pro typescript springboot activiti权限、工作流框架
是什么? 使用springboot,activiti,mybatis,react,ant design pro,typescript 开发的后台管理系统(包含权限管理.工作流等功能),真正前后端分离的 ...
React Ant design pro 访问服务器接口，获取数据显示
React Ant design pro 访问服务器接口一.前两天更新了Ant design pro环境搭建,需要了解的小伙伴可以看一下之前的内容,还有react基础教程噢. 二.框架搭建完后,一般 ...
如何修改ant design mobile或者其他UI组件的全局样式
问题描述: 有时候你可能会遇到一些前端CSS实现上的问题,因为美工的画图与你的项目使用的UI框架的样式大有出入,所以在写页面样式的时候多多少少会让你有些头疼,那么该类问题应该如何解决呢? 原因分析: ...
【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

react-ant design mobile - webpack 自定义主题

react-ant design mobile - webpack 自定义主题相关推荐

最新文章

热门文章