antd-mobileをインストールする グローバル輸入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 プラグインをインストールし、 カスタマイズ-cra 構成 API ドキュメント 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', })、 ); postcss pxからremへの導入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") }) ); 補足: reactプロジェクトにantd-mobileが導入されたためにpostcss設定のpxからremへの変換が失敗する問題を解決します 今日、antd-mobileを使用したところ、以前設定したpostcssが無効であることがわかりました。次の落とし穴を防ぐために、解決策を記録します。config-overrides.jsファイルでpostcssを書き直し、次のコードを追加します。 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内の他の関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
<<: Dockerはホスト間のネットワーク通信を実現するためにMacvlanを導入する
>>: MySQLデータベースのストアドプロシージャとトランザクションの違い
この記事の例では、スライダー検証を実装するためのjsキャンバスの具体的なコードを参考までに共有してい...
セルの背景画像を設定でき、任意の GIF または JPEG 画像ファイルを使用できます。基本的な構文...
ステートメント 1: <link rel="shortcut icon" ...
1. Linuxサーバーは、/etc/hosts.denyを設定して、相手のIPがSSH経由でサー...
この記事では、Vueを使用してショッピングカートの数量を変更する方法を紹介します。具体的な内容は次の...
この記事の例では、多人数チャットルームを実装するためのjsコードの具体的なコードを参考までに共有して...
目次1. コンセプトメモリ管理モード住所種別分類例: 2. ページ管理x86 アーキテクチャ 32 ...
目次MySQL の基本的な共通コマンド1. SQL文2. テーブルを作成する3. フィールドのプロパ...
目次序文現地調査ケースの再現要約する序文最近、友人が突然WeChatで連絡してきて、MySQLでデー...
nginx 設定ファイルは主に 4 つの部分に分かれています。 main{#(グローバル設定) ht...
みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...
<br />前回の記事:Webデザイン講座(7):Webページ制作の効率化1:必要な小言...
背景VirtualBox 仮想マシン (Ubuntu 16.04 システムがロードされている) には...
MySQL には次のログがあります。エラーログ: -log-errクエリログ: -logスロークエリ...
序文負荷分散には nginx を使用します。アーキテクチャのフロントエンドまたは中間層として、トラフ...