Heim > Artikel > Web-Frontend > So führen Sie externe CSS-Dateien in Uniapp ein
So führen Sie externe CSS-Dateien in Uniapp ein
- PHPzOriginal
- 2023-04-18 14:09:575504Durchsuche
Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie beginnen immer mehr Entwickler, Uni-App für die plattformübergreifende Entwicklung zu verwenden. Eine der wesentlichen Funktionen besteht darin, externe CSS-Dateien einzuführen, um den Stil der Seite besser anzupassen. Wie sollten wir also externe CSS-Dateien in Uni-App einführen? In diesem Artikel werden Sie nacheinander ausführlich vorgestellt.
1. Fügen Sie externe CSS-Dateien in die Vue-Komponente ein.
In der Uni-App können wir Vue-Komponenten zum Erstellen von Seiten verwenden. Daher können wir externe CSS-Dateien direkt in die Vue-Komponente einfügen.
Erstellen Sie zunächst eine neue CSS-Datei, z. B. „styles.css“, im Stammverzeichnis Ihres Projekts. Als nächstes verwenden Sie in der Vue-Komponente, die CSS einführen muss, die Importanweisung, um die CSS-Datei einzuführen:
<template>
<!-- your template code here -->
</template>
<script>
import '@/styles.css'
// your script code here
export default {
name: 'your-component-name'
}
</script>
<style scoped>
/* your component's style code here */
</style>
Im obigen Code haben wir zuerst die Datei „styles.css“ über die Importanweisung eingeführt und sie dann im Skript verwendet Tag des Vue-Komponentenstils. Es ist zu beachten, dass die Stile in der Datei „styles.css“ nur auf die aktuelle Komponente angewendet werden, da in Vue-Komponenten bereichsbezogene Stile verwendet werden.
2. Externe CSS-Dateien in HTML-Seiten einbinden
Zusätzlich zur Verwendung externer CSS-Dateien in Vue-Komponenten können wir sie auch direkt in HTML-Seiten einbinden. Diese Methode eignet sich für Situationen, in denen Sie denselben Stil für mehrere Vue-Komponenten verwenden müssen.
Zuerst müssen wir auch eine neue CSS-Datei im Stammverzeichnis des Projekts erstellen, z. B. „styles.css“. Als nächstes verwenden wir das Link-Tag, um die CSS-Datei in die HTML-Seite einzuführen:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My uni-app project</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <div id="app"></div> <script src="/uni.js"></script> </body> </html>
Im obigen Code verwenden wir das Link-Tag, um die Datei „styles.css“ einzuführen und sie im Head-Tag zu platzieren. Es ist zu beachten, dass der Pfad im href-Attribut hier relativ zum Projektstammverzeichnis ist.
Wenn wir außerdem die CSS-Bibliothek eines externen CDN-Links einführen müssen, können wir diese auch direkt in die HTML-Seite einführen:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My uni-app project</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div id="app"></div> <script src="/uni.js"></script> </body> </html>
Im obigen Code verwenden wir den CDN-Link von Bootstrap und führen ihn über in den HTML-Code ein die Link-Tag-Seite.
Zusammenfassung
In Uni-App können wir den Stil der Seite anpassen, indem wir externe CSS-Dateien in die Vue-Komponente oder HTML-Seite einfügen. Es gibt zwei Einführungsmethoden: Verwenden der Importanweisung in der Vue-Komponente oder Verwenden des Link-Tags in der HTML-Seite. Gleichzeitig können wir auch CSS-Bibliotheken einführen, die mit externen CDNs verknüpft sind. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, CSS-Dateien in Uni-App einzuführen.
Das obige ist der detaillierte Inhalt vonSo führen Sie externe CSS-Dateien in Uniapp ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!