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データベースのストアドプロシージャとトランザクションの違い

推薦する

MySQL マルチバージョン同時実行制御 MVCC の実装

トランザクション分離レベルの設定 グローバルトランザクション分離レベルを読み取りコミット済みに設定;...

JS配列の次元削減のいくつかの方法の詳細な説明

2次元配列の次元削減配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次...

WeChatアプレットが検索ボックス機能を実装

この記事の例では、WeChatアプレットの検索ボックス機能を実装するための具体的なコードを参考までに...

CSS 標準: vertical-align プロパティ

<br />原文: http://www.mikkolee.com/13私は最近、ver...

MySQL 5.7.17 無料インストールバージョンの設定方法グラフィックチュートリアル (Windows10)

1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...

MySQL トリガーの使用方法と利点と欠点の紹介

目次序文1. トリガーの概要2. トリガーの作成2.1 トリガー構文の作成2.2 コード例3. トリ...

CSSを使用してAndroidシステムの読み込みアニメーションを実装する

Web には一般的な読み込みアイコンが 2 つあります。1 つは iOS の「菊」、もう 1 つは ...

jQueryは検証コード送信のコントロールボタンを無効にする機能を実装します

必要な効果: 確認コードを送信するためにクリックした後、ボタンは無効になり、5 秒後に無効解除されま...

JavaScriptは検証コードと検証のランダム生成を実装します

この記事では、検証コードのランダム生成と検証を実現するためのJavaScriptの具体的なコードを参...

Centos 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar の簡単な分析

Baiduクラウドディスク:リンク: https://pan.baidu.com/s/1hv5rUW...

Javascriptジェネレータの紹介と使用

ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...

Kubernetes コントローラーとラベルの簡単な分析

目次01 k8sの一般的なコントローラーRCコントローラーデプロイメント コントローラーステートフル...

Html+CSS フローティング広告ストリップの実装

1.html部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> ...

MySQL のキーとインデックスの違い

まずはコードを見てみましょう: ALTER TABLE reportblockdetail ADD ...

JavaScriptの記事では、Webフォームの操作方法を説明します。

1. はじめに先ほど、ウェブページの急速な発展について紹介しました。今回は、より深い内容についてお...