So führen Sie externe CSS-Dateien in Uniapp ein-uni-app-php.cn

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

PHPz

Freigeben： 2023-04-18 14:52:55

Original

5485 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!