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

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

 更新時間:2021年06月20日 15:43:59   作者:明知山_  
本文給大家分享React引入antd-mobile+postcss搭建移動端的詳細流程,文末給大家分享我的一些經(jīng)驗記錄使用antd-mobile時發(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進行更改命令方式

 "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轉(zhuǎn)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, //只轉(zhuǎn)換到兩位小數(shù)
                    exclude: /node_modules/i //插件不需要轉(zhuǎn)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, //只轉(zhuǎn)換到兩位小數(shù)
                    exclude: /node_modules/i //插件不需要轉(zhuǎn)rem
                }
            )
        ]
    ),

    addWebpackAlias({
        "@": path.resolve(__dirname, "src")
    })
);

補充:解決react項目引入antd-mobile導致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")({
          // 設計稿寬度/10
          remUnit: 1080 / 10,
          exclude: /node-modules/i,
        }),
      ],
    });
    return config;
  }
);

以上就是React引入antd-mobile+postcss搭建移動端的詳細內(nèi)容,更多關于React搭建移動端的資料請關注腳本之家其它相關文章!

相關文章

  • 列表頁常見hook封裝實例

    列表頁常見hook封裝實例

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

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

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

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

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

    react  Suspense工作原理解析

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

    每天一個hooks學習之useUnmount

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

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

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

    Router添加路由攔截方法講解

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

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

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

    react.js實現(xiàn)頁面登錄跳轉(zhuǎn)示例

    本文主要介紹了react.js實現(xiàn)頁面登錄跳轉(zhuǎn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-01-01
  • React?中?memo?useMemo?useCallback?到底該怎么用

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

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

最新評論