欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React引入antd-mobile+postcss搭建移動(dòng)端

 更新時(shí)間:2021年06月20日 15:43:59   作者:明知山_  
本文給大家分享React引入antd-mobile+postcss搭建移動(dòng)端的詳細(xì)流程,文末給大家分享我的一些經(jīng)驗(yàn)記錄使用antd-mobile時(shí)發(fā)現(xiàn)我之前配置的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進(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)文章

  • 列表頁常見hook封裝實(shí)例

    列表頁常見hook封裝實(shí)例

    這篇文章主要為大家介紹了列表頁常見的hook封裝示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • React翻頁器的實(shí)現(xiàn)(包含前后端)

    React翻頁器的實(shí)現(xiàn)(包含前后端)

    本文主要介紹了React翻頁器的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • React使用高階組件與Hooks實(shí)現(xiàn)權(quán)限攔截教程詳細(xì)分析

    React使用高階組件與Hooks實(shí)現(xiàn)權(quán)限攔截教程詳細(xì)分析

    高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件(功能增強(qiáng)的組件)的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù),并不是組件,這一點(diǎn)一定要注意,本文給大家分享React高階組件使用小結(jié),一起看看吧
    2023-01-01
  • react  Suspense工作原理解析

    react  Suspense工作原理解析

    這篇文章主要為大家介紹了react  Suspense工作原理解析以及基本應(yīng)用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • 每天一個(gè)hooks學(xué)習(xí)之useUnmount

    每天一個(gè)hooks學(xué)習(xí)之useUnmount

    這篇文章主要為大家介紹了每天一個(gè)hooks學(xué)習(xí)之useUnmount,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05
  • React路由規(guī)則定義與聲明式導(dǎo)航及編程式導(dǎo)航分別介紹

    React路由規(guī)則定義與聲明式導(dǎo)航及編程式導(dǎo)航分別介紹

    這篇文章主要介紹了React路由規(guī)則的定義、聲明式導(dǎo)航、編程式導(dǎo)航,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2022-09-09
  • Router添加路由攔截方法講解

    Router添加路由攔截方法講解

    在vue項(xiàng)目中使用vue-router做頁面跳轉(zhuǎn)時(shí),路由的方式有兩種,一種是靜態(tài)路由,另一種是動(dòng)態(tài)路由。而要實(shí)現(xiàn)對路由的控制需要使用vuex和router全局守衛(wèi)進(jìn)行判斷攔截
    2023-03-03
  • react+ant design實(shí)現(xiàn)Table的增、刪、改的示例代碼

    react+ant design實(shí)現(xiàn)Table的增、刪、改的示例代碼

    這篇文章主要介紹了react+ant design實(shí)現(xiàn)Table的增、刪、改的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • react.js實(shí)現(xiàn)頁面登錄跳轉(zhuǎn)示例

    react.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-01
  • React?中?memo?useMemo?useCallback?到底該怎么用

    React?中?memo?useMemo?useCallback?到底該怎么用

    在React函數(shù)組件中,當(dāng)組件中的props發(fā)生變化時(shí),默認(rèn)情況下整個(gè)組件都會(huì)重新渲染。換句話說,如果組件中的任何值更新,整個(gè)組件將重新渲染,包括沒有更改values/props的函數(shù)/組件。在react中,我們可以通過memo,useMemo以及useCallback來防止子組件的rerender
    2022-10-10

最新評論