So führen Sie externe CSS-Dateien in Uniapp ein

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 &#39;@/styles.css&#39;
  // your script code here
  export default {
    name: &#39;your-component-name&#39;
  }
</script>

<style>
  /* your component&#39;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:

nbsp;html>


  <meta>
  <title>My uni-app project</title>
  <link>


  <div></div>
  <script></script>

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:

nbsp;html>


  <meta>
  <title>My uni-app project</title>
  <link>


  <div></div>
  <script></script>

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!