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データベースのストアドプロシージャとトランザクションの違い
トランザクション分離レベルの設定 グローバルトランザクション分離レベルを読み取りコミット済みに設定;...
2次元配列の次元削減配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次...
この記事の例では、WeChatアプレットの検索ボックス機能を実装するための具体的なコードを参考までに...
<br />原文: http://www.mikkolee.com/13私は最近、ver...
1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...
目次序文1. トリガーの概要2. トリガーの作成2.1 トリガー構文の作成2.2 コード例3. トリ...
Web には一般的な読み込みアイコンが 2 つあります。1 つは iOS の「菊」、もう 1 つは ...
必要な効果: 確認コードを送信するためにクリックした後、ボタンは無効になり、5 秒後に無効解除されま...
この記事では、検証コードのランダム生成と検証を実現するためのJavaScriptの具体的なコードを参...
Baiduクラウドディスク:リンク: https://pan.baidu.com/s/1hv5rUW...
ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...
目次01 k8sの一般的なコントローラーRCコントローラーデプロイメント コントローラーステートフル...
1.html部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> ...
まずはコードを見てみましょう: ALTER TABLE reportblockdetail ADD ...
1. はじめに先ほど、ウェブページの急速な発展について紹介しました。今回は、より深い内容についてお...