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

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:

1. 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

2. 配置.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

Configuration.vueconfig.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

Fügen Sie die Stile hinzu, die eingeführt werden müssen


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:

rrreee

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!