Maison >interface Web >uni-app >Comment introduire des fichiers CSS externes dans Uniapp

Comment introduire des fichiers CSS externes dans Uniapp

PHPzoriginal: 2023-04-18 14:09:575537parcourir

Avec le développement continu de la technologie front-end, de plus en plus de développeurs commencent à utiliser uni-app pour le développement multiplateforme. L'une des fonctions essentielles est d'introduire des fichiers CSS externes pour mieux personnaliser le style de la page. Alors, comment devrions-nous introduire des fichiers CSS externes dans uni-app ? Cet article vous présentera en détail un par un.

1. Introduire des fichiers CSS externes dans le composant Vue

Dans uni-app, nous pouvons utiliser des composants Vue pour créer des pages. Par conséquent, nous pouvons introduire des fichiers CSS externes directement dans le composant Vue.

Tout d'abord, créez un nouveau fichier CSS, tel que styles.css, dans le répertoire racine de votre projet. Ensuite, dans le composant Vue qui doit introduire CSS, utilisez l'instruction import pour introduire le fichier CSS :

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

Dans le code ci-dessus, nous avons d'abord introduit le fichier styles.css via l'instruction import, puis nous l'avons utilisé dans le script balise du style du composant Vue. Il convient de noter que puisque les styles étendus sont utilisés dans les composants Vue, les styles dans styles.css ne seront appliqués qu'au composant actuel.

2. Introduire des fichiers CSS externes dans les pages HTML

En plus d'utiliser des fichiers CSS externes dans les composants Vue, nous pouvons également les introduire directement dans les pages HTML. Cette méthode convient aux situations où vous devez partager le même style entre plusieurs composants Vue.

Tout d'abord, nous devons également créer un nouveau fichier CSS dans le répertoire racine du projet, tel que styles.css. Ensuite, utilisez la balise link pour introduire le fichier CSS dans la page HTML :

<!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>

Dans le code ci-dessus, nous utilisons la balise link pour introduire le fichier styles.css et le placer dans la balise head. Il convient de noter que le chemin dans l'attribut href ici est relatif au répertoire racine du projet.

De plus, si nous devons introduire la bibliothèque CSS d'un lien CDN externe, nous pouvons également l'introduire directement dans la page HTML :

<!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>

Dans le code ci-dessus, nous utilisons le lien CDN de Bootstrap et l'introduisons dans le HTML via la page de balise de lien.

Résumé

Dans uni-app, nous pouvons personnaliser le style de la page en introduisant des fichiers CSS externes dans le composant Vue ou la page HTML. Il existe deux méthodes d'introduction : en utilisant l'instruction import dans le composant Vue ou en utilisant la balise link dans la page HTML. En parallèle, nous pouvons également introduire des bibliothèques CSS liées à des CDN externes. J'espère que cet article pourra vous aider à introduire les fichiers CSS dans uni-app.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter la fonction de cliquer sur un bouton pour obtenir du contenu dans uniappArticle suivant：Comment implémenter la fonction de cliquer sur un bouton pour obtenir du contenu dans uniapp

Articles Liés

Voir plus