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

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

antd-mobileをインストールする

グローバル輸入

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

App.jsに CSS をインポートする

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

jsxで antd コンポーネントを使用する

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

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

オンデマンドインポート

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

プラグインをインストールし、 webpack設定を上書きする

カスタマイズ-cra 構成 API ドキュメント

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

package.jsonを変更するためのコマンドメソッド

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

ルートディレクトリに新しいconfig-overrides.jsを作成します。

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

App.jsで以前に導入したCSSを削除します。
オンデマンドでインポートされているかどうかを確認する

ここに画像の説明を挿入

postcss pxからremへの導入

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

index.jsをインポートする

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

config-overrides.jsファイルを変更する

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

プロジェクトがエラーで起動する場合は、 less-loaderバージョンが高すぎることが原因です。アンインストールして、より低いバージョンをインストールする必要があります。

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

補足: reactプロジェクトにantd-mobileが導入されたためにpostcss設定のpxからremへの変換が失敗する問題を解決します

今日、antd-mobileを使用したところ、以前設定したpostcssが無効であることがわかりました。次の落とし穴を防ぐために、解決策を記録します。config-overrides.jsファイルでpostcssを書き直し、次のコードを追加します。
npmは以下のモジュールをダウンロードします

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、
        })、
      ]、
    });
    設定を返します。
  }
);

以上がReactを使ってantd-mobile+postcssでモバイル端末を構築する手順です。Reactを使ったモバイル端末の構築についての詳細は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • ReactプロジェクトにSCSSを導入する方法
  • React に CSS を導入する方法とその違いは何ですか?

<<:  Dockerはホスト間のネットワーク通信を実現するためにMacvlanを導入する

>>:  MySQLデータベースのストアドプロシージャとトランザクションの違い

推薦する

js キャンバスはスライダー検証を実現します

この記事の例では、スライダー検証を実装するためのjsキャンバスの具体的なコードを参考までに共有してい...

HTML テーブルタグチュートリアル (27): セルの背景画像属性 BACKGROUND

セルの背景画像を設定でき、任意の GIF または JPEG 画像ファイルを使用できます。基本的な構文...

ショートカットアイコンとアイコンコードの違いの紹介

ステートメント 1: <link rel="shortcut icon" ...

LinuxサーバのSSHクラッキング防止方法(推奨)

1. Linuxサーバーは、/etc/hosts.denyを設定して、相手のIPがSSH経由でサー...

Vueは買い物数量を変更できるショッピングカートを実装します

この記事では、Vueを使用してショッピングカートの数量を変更する方法を紹介します。具体的な内容は次の...

複数人チャットルームを実現する js コード

この記事の例では、多人数チャットルームを実装するためのjsコードの具体的なコードを参考までに共有して...

Linux のメモリ管理とアドレス指定の詳細な紹介

目次1. コンセプトメモリ管理モード住所種別分類例: 2. ページ管理x86 アーキテクチャ 32 ...

MySQLの基本的な共通コマンドの概要

目次MySQL の基本的な共通コマンド1. SQL文2. テーブルを作成する3. フィールドのプロパ...

MySQLデータ損失のトラブルシューティング事例

目次序文現地調査ケースの再現要約する序文最近、友人が突然WeChatで連絡してきて、MySQLでデー...

nginx設定ファイルの解釈の詳細な説明

nginx 設定ファイルは主に 4 つの部分に分かれています。 main{#(グローバル設定) ht...

Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...

Webデザインチュートリアル(8):Webページの階層と空間デザイン

<br />前回の記事:Webデザイン講座(7):Webページ制作の効率化1:必要な小言...

VirtualBox仮想マシンがNATモードで外部ネットワークに接続できない問題の解決策

背景VirtualBox 仮想マシン (Ubuntu 16.04 システムがロードされている) には...

MySQL ログの設定と表示方法

MySQL には次のログがあります。エラーログ: -log-errクエリログ: -logスロークエリ...

VMware で Nginx+KeepAlived クラスタ デュアルアクティブ アーキテクチャを展開する際の問題と解決策

序文負荷分散には nginx を使用します。アーキテクチャのフロントエンドまたは中間層として、トラフ...