React引入antd-mobile+postcss搭建移動(dòng)端
安裝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
配置
npm install react-app-rewired customize-cra -s
package.json
進(jìn)行更改命令方式
"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
校驗(yàn)是否按需引入
引入postcss px轉(zhuǎn)rem
npm install lib-flexible postcss-px2rem-exclude --save
index.js
導(dǎo)入
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, //設(shè)計(jì)圖大小 remPrecision: 2, //只轉(zhuǎn)換到兩位小數(shù) exclude: /node_modules/i //插件不需要轉(zhuǎn)rem } ) ] ), addWebpackAlias({ "@": path.resolve(__dirname, "src") }) );
如果你需要使用less
/
自定義主題
npm install less less-loader -s
如果項(xiàng)目啟動(dòng)報(bào)錯(cuò),是因?yàn)?code>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, //默認(rèn)為'css' }), addLessLoader({ javascriptEnabled: true, modifyVars: { "@brand-primary": "#1DA57A" }, //自定義主題 }), addPostcssPlugins( [require("postcss-px2rem-exclude") ( { remUnit: 75, //設(shè)計(jì)圖大小 remPrecision: 2, //只轉(zhuǎn)換到兩位小數(shù) exclude: /node_modules/i //插件不需要轉(zhuǎn)rem } ) ] ), addWebpackAlias({ "@": path.resolve(__dirname, "src") }) );
補(bǔ)充:解決react項(xiàng)目引入antd-mobile導(dǎo)致postcss配置px轉(zhuǎn)rem失效問題
今天使用了一下antd-mobile發(fā)現(xiàn)我之前配置的postcss失效了,防止下次踩坑記錄一下解決方案
解決方案:在config-overrides.js文件里重寫postcss,加入如下代碼
npm下載以下模塊
npm i react-app-rewire-postcss postcss-px2rem-exclude -S
const { override, fixBabelImports, addWebpackAlias, addDecoratorsLegacy, } = require("customize-cra"); const path = require("path"); const rewirePostcss = require("react-app-rewire-postcss"); module.exports = override( // 配置按需加載 fixBabelImports("import", { libraryName: "antd-mobile", style: "css", }), // 配置文件別名 addWebpackAlias({ "@": path.resolve(__dirname, "src"), "@scss": path.resolve(__dirname, "src/assets/scss"), "@images": path.resolve(__dirname, "src/assets/images"), "@views": path.resolve(__dirname, "src/views"), "@network": path.resolve(__dirname, "src/network"), "@store": path.resolve(__dirname, "src/store"), "@components": path.resolve(__dirname, "src/components"), }), addDecoratorsLegacy(), (config, env) => { // 重寫postcss rewirePostcss(config, { plugins: () => [ require("postcss-flexbugs-fixes"), require("postcss-preset-env")({ autoprefixer: { flexbox: "no-2009", }, stage: 3, }), require("postcss-px2rem-exclude")({ // 設(shè)計(jì)稿寬度/10 remUnit: 1080 / 10, exclude: /node-modules/i, }), ], }); return config; } );
以上就是React引入antd-mobile+postcss搭建移動(dòng)端的詳細(xì)內(nèi)容,更多關(guān)于React搭建移動(dòng)端的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React使用高階組件與Hooks實(shí)現(xiàn)權(quán)限攔截教程詳細(xì)分析
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件(功能增強(qiáng)的組件)的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù),并不是組件,這一點(diǎn)一定要注意,本文給大家分享React高階組件使用小結(jié),一起看看吧2023-01-01每天一個(gè)hooks學(xué)習(xí)之useUnmount
這篇文章主要為大家介紹了每天一個(gè)hooks學(xué)習(xí)之useUnmount,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05React路由規(guī)則定義與聲明式導(dǎo)航及編程式導(dǎo)航分別介紹
這篇文章主要介紹了React路由規(guī)則的定義、聲明式導(dǎo)航、編程式導(dǎo)航,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09react+ant design實(shí)現(xiàn)Table的增、刪、改的示例代碼
這篇文章主要介紹了react+ant design實(shí)現(xiàn)Table的增、刪、改的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12react.js實(shí)現(xiàn)頁面登錄跳轉(zhuǎn)示例
本文主要介紹了react.js實(shí)現(xiàn)頁面登錄跳轉(zhuǎn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01React?中?memo?useMemo?useCallback?到底該怎么用
在React函數(shù)組件中,當(dāng)組件中的props發(fā)生變化時(shí),默認(rèn)情況下整個(gè)組件都會(huì)重新渲染。換句話說,如果組件中的任何值更新,整個(gè)組件將重新渲染,包括沒有更改values/props的函數(shù)/組件。在react中,我們可以通過memo,useMemo以及useCallback來防止子組件的rerender2022-10-10