uniappの参照コンポーネントがCSSを見つけられない問題を解決する方法

フロントエンド テクノロジの開発が進むにつれて、Vue.js に基づくモバイル開発フレームワーク uni-app も、その高度にコンポーネント化されたクロスプラットフォーム開発特性により、ますます多くの開発者に好まれています。ただし、プロジェクトの規模が大きくなるにつれて、uni-app を使用した開発中に問題が発生することがあります。特にコンポーネントを参照する際に該当するCSSが見つからない場合、この問題に遭遇したことがある人は多いと思います。この記事では、uni-appのコンポーネント参照でcssが見つからない問題の解決策を詳しく紹介します。

1. 問題の説明

uni-app では、開発時に他人が開発したコンポーネント ライブラリを使用することがよくあります。ただし、使用中に、他のコンポーネント ライブラリのコンポーネントを参照すると、一部の CSS スタイルが正常に参照されず、コンポーネントの表示に問題が発生し、次の図に示すように、プロジェクト全体が非常に統一されていないように見えることがわかります。

2. 問題分析

1. 理由

通常、コンポーネントのスタイルはコンポーネント内の style タグで定義され、コンポーネントの JavaScript コードが実行されます。ページに動的に挿入されます。ただし、npm を通じてインストールされたサードパーティ コンポーネントのスタイルはページに動的に読み込むことができないため、スタイルが機能しなくなります。

2. 解決策

問題の根本は、コンポーネントのスタイルをページに動的に読み込むことができないことであるため、3 番目のスタイルを読み込む方法を見つける必要があります。

① サードパーティ コンポーネントのコンポーネントとスタイルをソース コードからプロジェクトに直接コピーし、参照します。この方法は実現可能ですが、プロジェクトが複雑になり、メンテナンスや更新が難しくなります。

② uni-app が提供するスタイル拡張機能を使用して、プラグインを通じてサードパーティ コンポーネントのスタイルをプロジェクトに読み込みます。

3. ソリューションの実装

ここでは、Mint UI のスタイルを例に、uni-app が提供するスタイル拡張機能を使用してサードパーティ コンポーネントのスタイルを読み込む方法を紹介します。

1. スタイル プラグインのインストール

まず、uni-app が提供するスタイル拡張プラグインをインストールする必要があります。インストールする uni-app プロジェクトに次のコマンドを入力します:

npm install uniapp-style-loader --save-dev

2. Configuration.vueconfig。 js

プロジェクト ルート ディレクトリで vueconfig.js ファイルを見つけて、次のコードを追加します。

configureWebpack: {
        module: {
            rules: [    
                 {
                 test: /\.(vue|(j|t)sx?)$/,
                 exclude: /node_modules/,   
                    use: [
                        {
                          loader: 'uniapp-style-loader',
                          options: {
                             // 可选参数，最大改变css、less、scss数量(默认3000)
                            maxImport: 3000,
                          },
                        }
                        ]
                    }
             ]
         }
     },

3. 必要なスタイルを追加します。導入

スタイル拡張プラグインをインストールした後、特定のファイルに導入する必要があるサードパーティ コンポーネントのスタイルを記述する必要があります。 Mint UI は assets/style/mint -ui.scss ファイルに導入する必要があります。次に、main.js ファイルでそれを参照します。

// 引入样式
import '@/assets/style/mint-ui.scss';

この時点で、Mint UI スタイル ファイルがプロジェクトに正常に読み込まれました。プロジェクトを再コンパイルすると、次の図に示すように、コンポーネント導入後の影響がうまく修復されていることがわかります。

4. 概要

##この記事では、uni-app でコンポーネントを参照するときに CSS が見つからない問題の解決策について詳しく説明します。 uni-app が提供するスタイル拡張機能を使用して、プラグインを通じてサードパーティ コンポーネントのスタイルをプロジェクトにロードできます。これにより、コンポーネント内のスタイルが欠落している問題が解決されるだけでなく、プロジェクト開発の効率も向上します。

以上がuniappの参照コンポーネントがCSSを見つけられない問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。