So lösen Sie das Problem, dass die referenzierte Komponente in Uniapp kein CSS finden kann-uni-app-php.cn

So lösen Sie das Problem, dass die referenzierte Komponente in Uniapp kein CSS finden kann

PHPz

Freigeben： 2023-04-20 09:16:50

Original

839 Leute haben es durchsucht

Mit der zunehmenden Entwicklung der Front-End-Technologie wird das auf Vue.js basierende mobile Entwicklungsframework uni-app aufgrund seiner stark komponentenbasierten und plattformübergreifenden Entwicklungseigenschaften auch von immer mehr Entwicklern bevorzugt. Mit zunehmender Projektgröße treten jedoch manchmal Probleme bei der Entwicklung mit Uni-App auf. Insbesondere wenn beim Referenzieren von Komponenten das entsprechende CSS nicht gefunden werden kann, sind meiner Meinung nach viele Menschen auf dieses Problem gestoßen. In diesem Artikel wird die Lösung des Problems, dass die Komponentenreferenz in der Uni-App kein CSS finden kann, ausführlich vorgestellt.

1. Problembeschreibung

In Uni-Apps verwenden wir bei der Entwicklung häufig von anderen entwickelte Komponentenbibliotheken. Bei der Verwendung werden wir jedoch feststellen, dass beim Referenzieren von Komponenten in anderen Komponentenbibliotheken einige CSS-Stile nicht erfolgreich referenziert werden, was zu Problemen bei der Anzeige der Komponenten führt und das gesamte Projekt sehr unkoordiniert erscheinen lässt, wie in der folgenden Abbildung dargestellt.

< /div>

2. Problemanalyse

1. Grund

Normalerweise wird der Stil der Komponente darin ausgeführt Die Definition der Komponente und der JavaScript-Code der Komponente werden zur Laufzeit dynamisch in die Seite eingefügt. Allerdings können die Stile in über npm installierten Drittanbieterkomponenten nicht dynamisch in die Seite geladen werden, was dazu führt, dass die Stile nicht funktionieren.

2. Lösung

Da die Ursache des Problems darin liegt, dass der Stil der Komponente nicht dynamisch in die Seite geladen werden kann, müssen wir einen Weg finden, den zu laden Stil der Drittanbieterkomponente in Im Projekt können wir die folgenden zwei Methoden verwenden, um das Problem zu lösen:

① Kopieren Sie die Komponenten und Stile der Drittanbieterkomponenten direkt aus dem Quellcode in das Projekt und verweisen Sie dann darauf. Obwohl diese Methode machbar ist, erhöht sie die Komplexität des Projekts und die Schwierigkeit bei Wartung und Aktualisierungen.

② Nutzen Sie die von uni-app bereitgestellte Stilerweiterungsfunktion, um die Stile von Drittanbieterkomponenten über Plug-Ins in das Projekt zu laden.

3. Lösungsimplementierung

Hier nehmen wir den Stil der Mint-Benutzeroberfläche als Beispiel, um vorzustellen, wie die von uni-app bereitgestellte Stilerweiterungsfunktion zum Laden der Stile von verwendet wird Komponenten von Drittanbietern in das Projekt einbinden Gehen Sie zu:

Style-Plug-in installieren

Wir müssen zuerst das Style-Erweiterungs-Plug-in installieren bereitgestellt von uni-app. Geben Sie den folgenden Befehl in das zu installierende Uni-App-Projekt ein:

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

配置.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,
                          },
                        }
                        ]
                    }
             ]
         }
     },

Nach dem Login kopieren

添加需要引入的样式

安装好样式扩展插件后，我们需要将需要引入的第三方组件的样式写到一个特定的文件中，例如我们将需要引入的Mint UI的样式写到assets/style/mint-ui.scss文件中。然后在main.js

Suchen Sie die Datei vueconfig.js im Projektstammverzeichnis und fügen Sie den folgenden Code hinzu: #🎜🎜 #

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

Nach dem Login kopieren

Nach der Installation des Stilerweiterungs-Plug-Ins müssen wir die Stile von schreiben die Komponenten von Drittanbietern, die in eine bestimmte Datei eingeführt werden müssen, zum Beispiel schreiben wir den Mint-UI-Stil, der in die Datei assets/style/mint-ui.scss eingeführt werden muss. Verweisen Sie dann in der Datei main.js darauf:

Zu diesem Zeitpunkt haben wir die Mint-UI-Stildatei erfolgreich in unser Projekt geladen. Nach der Neukompilierung des Projekts wurde festgestellt, dass der Effekt nach der Einführung der Komponente gut behoben wurde, wie in der folgenden Abbildung dargestellt.

#🎜🎜#

#🎜🎜#< /div>#🎜🎜##🎜🎜#4. Zusammenfassung#🎜🎜##🎜🎜#Dieser Artikel beschreibt die Lösung für das Problem, dass das CSS beim Verweisen auf Komponenten in der Uni-App nicht gefunden werden kann. Wir können die von uni-app bereitgestellte Stilerweiterungsfunktion verwenden, um die Stile von Komponenten von Drittanbietern über Plug-Ins in das Projekt zu laden. Dadurch wird nicht nur das Problem fehlender Stile in Komponenten gelöst, sondern auch die Effizienz der Projektentwicklung verbessert. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die referenzierte Komponente in Uniapp kein CSS finden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!