React はモバイル端末を構築するために antd-mobile+postcss を導入しました

npm をインストール antd-mobile --save

'antd-mobile/dist/antd-mobile.css' をインポートします。

'react' から React をインポートします。
'antd-mobile' から Button をインポートします。
定数インデックス = () => {
    戻る （
        <div>
            <Button type="primary">プライマリ</Button>
        </div>
    );
}

デフォルトインデックスをエクスポートします。

npm インストール babel-plugin-import -s

npm インストール react-app-rewired カスタマイズ cra -s

 「スクリプト」: {
    "開始": "react-app-rewired 開始",
    "ビルド": "react-app-rewired ビルド",
    "テスト": "react-app-rewired テスト",
    "取り出し": "react-app-rewired 取り出し"
  },

const { override, fixBabelImports } = require('customize-cra');
モジュール.エクスポート = オーバーライド(
    BabelImportsを修正('import', {
        ライブラリ名: 'antd-mobile',
        スタイル: 'css',
    }）、
);

npm で lib-flexible postcss-px2rem-exclude --save をインストールします

'lib-flexible' をインポートする

const { override、fixBabelImports、addPostcssPlugins、addWebpackAlias} = require('customize-cra');
定数パス = require("パス");
モジュール.エクスポート = オーバーライド(
    BabelImportsを修正('import', {
        ライブラリ名: 'antd-mobile',
        スタイル: 'css',
    }）、
    追加Postcssプラグイン(
        [require("postcss-px2rem-exclude")
            （
                {
                    remUnit: 75, //デザインサイズ remPrecision: 2, //小数点以下2桁までしか変換しない exclude: /node_modules/i //プラグインはremに変換する必要がない
                }
            ）
        ]
    ）、
    WebpackAliasを追加します({
        "@": path.resolve(__dirname, "src")
    })
);

npm インストール less less-loader -s

npm インストール [email protected] -s

const { override、fixBabelImports、addPostcssPlugins、addWebpackAlias、addLessLoader } = require('customize-cra');
定数パス = require("パス");
モジュール.エクスポート = オーバーライド(
    BabelImportsを修正('import', {
        ライブラリ名: 'antd-mobile',
        style: true, //デフォルトは 'css'
    }）、

    レスローダーを追加します({
        javascriptが有効: true、
        modifyVars: { "@brand-primary": "#1DA57A" }, //カスタムテーマ}),

    追加Postcssプラグイン(
        [require("postcss-px2rem-exclude")
            （
                {
                    remUnit: 75, //デザインサイズ remPrecision: 2, //小数点以下2桁までしか変換しない exclude: /node_modules/i //プラグインはremに変換する必要がない
                }
            ）
        ]
    ）、

    WebpackAliasを追加します({
        "@": path.resolve(__dirname, "src")
    })
);

npm i react-app-rewire-postcss postcss-px2rem-exclude -S

定数{
  オーバーライド、
  BabelImportsを修正、
  WebpackAliasを追加、
  デコレーターレガシーを追加、
} = require("customize-cra");
定数パス = require("パス");
postcss は、react-app-rewire-postcss のサブクラスです。
モジュール.エクスポート = オーバーライド(
  //オンデマンド読み込みを設定するfixBabelImports("import", {
    ライブラリ名: "antd-mobile",
    スタイル: "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"),
  }）、
  デコレータレガシー()、
  (設定、環境) => {
    // postcss を書き換える
    rewirePostcss(config, {
      プラグイン: () => [
        必要("postcss-flexbugs-fixes")、
        必要("postcss-preset-env")({
          自動プレフィックス: {
            フレックスボックス: "no-2009",
          },
          ステージ: 3,
        }）、
        必要("postcss-px2rem-exclude")({
          // デザイン案幅/10
          rem単位: 1080 / 10,
          除外: /node-modules/i、
        }）、
      ]、
    });
    設定を返します。
  }
);