React引入antd-mobile+postcss搭建移动端

安装antd-mobile

全局引入

npm install antd-mobile --save

在App.js引入css

import 'antd-mobile/dist/antd-mobile.css';

在jsx使用antd组件

import React from 'react';
import { Button } from 'antd-mobile';
const index = () => {return (<div><Button type="primary">primary</Button></div>);
}export default index;

按需引入

npm install babel-plugin-import -s

安装插件，覆盖webpack配置

customize-cra配置api文档

npm install react-app-rewired customize-cra -s

package.json进行更改命令方式

 "scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-app-rewired eject"},

在根目录新建config-overrides.js

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(fixBabelImports('import', {libraryName: 'antd-mobile',style: 'css',}),
);

在App.js删除之前引入的css
校验是否按需引入

引入postcss px转rem

npm install lib-flexible postcss-px2rem-exclude --save

index.js导入

import 'lib-flexible'

修改config-overrides.js文件

const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias} = require('customize-cra');
const path = require("path");
module.exports = override(fixBabelImports('import', {libraryName: 'antd-mobile',style: 'css',}),addPostcssPlugins([require("postcss-px2rem-exclude")({remUnit: 75, //设计图大小remPrecision: 2, //只转换到两位小数exclude: /node_modules/i //插件不需要转rem})]),addWebpackAlias({"@": path.resolve(__dirname, "src")})
);

如果你需要使用less
/
自定义主题

npm install less less-loader -s

如果项目启动报错,是因为less-loader版本过高，需要卸载，安装低版本

npm install less-loader@5.0.0 -s

坑！需要注意顺序

const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias, addLessLoader } = require('customize-cra');
const path = require("path");
module.exports = override(fixBabelImports('import', {libraryName: 'antd-mobile',style: true, //默认为'css'}),addLessLoader({javascriptEnabled: true,modifyVars: { "@brand-primary": "#1DA57A" }, //自定义主题}),addPostcssPlugins([require("postcss-px2rem-exclude")({remUnit: 75, //设计图大小remPrecision: 2, //只转换到两位小数exclude: /node_modules/i //插件不需要转rem})]),addWebpackAlias({"@": path.resolve(__dirname, "src")})
);

React引入antd-mobile+postcss搭建移动端相关推荐

react 引入antd 样式_react引入antd组件
1.antd官网: https://ant.design/docs/react/introduce-cn 2.React中使用Antd 1.安装antd npm install antd --save ...
antd Mobile Tabs 垂直布局后台传入数据
最近两周在研究react 相关项目,react 相关的 UI插件中,antd 算是比较好的一种,所以这里就用antd mobile 开发一个移动端项目.具体react 知识点就不赘述了.这里主要讲遇到 ...
next.js+react+typescript+antd+antd-mobile+axios+redux+sass react服务端渲染构建项目，从构建到发布，兼容pc+移动端
简介:该教程兼容pc+移动端,如只需一端,可忽略兼容部分教程,根据需要运行的客户端构建项目 antd官网:https://ant.design/components/overview-cn/ antd ...
引入antd组件样式_扩大团队技术影响力，搭建团队自己的 UI 组件库
一.技术栈我们先简单了解一下要搭建一个团队的 UI 组件库,会涉及到哪些技术栈: Create React App:官方支持的 CLI 脚手架,提供一个零配置的现代构建设置: React: 用于构建 ...
Rails + React +antd + Redux环境搭建
前提条件:node和ruby on rails必须已经安装好(相关安装流程不再此处介绍) 1.nvm.node 2.npm or yarn装一个就好 3.rvm.ruby on rails 4.for ...
typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接这里module moduleResolution的配置都会影 ...
react结合antd的Cascader组件实现pc端选择城市控件
react结合antd的Cascader组件实现pc端选择城市控件业务需求,网上找了好多,发现都不太满意,于是自己写了一个 1.实现如下提示: 数据地址点击 https://xf-12521862 ...
react项目引入antd后npm start控制台报错(Failed to parse source map: ‘webpack://antd/./components/config-provid)
bug背景初学react,跟着b站视频学习antd的引入,引入如下: import { Button } from 'antd'; import 'antd/dist/antd.css' 在终端np ...
vue3+vite3+vant搭建移动端简易模版
前言 vue3.x相关的生态已经在不断的完善中,相应的UI/路由/pinia等都已成熟,新的项目也在考虑使用新版本开发了,开一个帖子记录一下搭建移动端简易模版的过程,方便以后回顾. vite前端构建工 ...

React引入antd-mobile+postcss搭建移动端

全局引入

按需引入

引入postcss px转rem

React引入antd-mobile+postcss搭建移动端相关推荐

最新文章

热门文章