React 도입 antd-mobile+postcss 구축 모 바 일 엔 드

antd-mobile 설치
전역 도입

npm install antd-mobile --save

css 도입

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

App.jsantd 구성 요 소 를 사용 합 니 다.

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

플러그 인 설치,덮어 쓰기jsx설정
customeized-cra 설정 api 문서

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

webpack명령 방식 변경

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

루트 디 렉 터 리 에 새로 만 들 기package.json

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

config-overrides.js삭제 하기 전에 도 입 된 css
필요 에 따라 도입 여 부 를 검사 합 니 다.

postcss px 전 rem 도입

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

App.js가 져 오기

import 'lib-flexible'

파일 수정

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")
    })
);

하면,만약,만약...
/
사용자 정의 테마

npm install less less-loader -s

프로젝트 시작 오류 가 발생 하면index.js버 전이 너무 높 아서 마 운 트 해제,낮은 버 전 설치 가 필요 합 니 다.

npm install [email protected] -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 설정 px 전 remy 실효 문제 해결
오늘 앤 드 모 바 일 을 사 용 했 는데 제 가 설정 한 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 를 도입 하여 모 바 일 엔 드 를 구축 하 는 상세 한 내용 입 니 다.React 가 모 바 일 엔 드 를 구축 하 는 데 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!