uniapp怎麼引入外部css文件-uni-app-PHP中文網

uniapp怎麼引入外部css文件

PHPz

發布： 2023-04-18 14:52:55

原創

5483 人瀏覽過

隨著前端技術的持續發展，越來越多的開發者開始使用uni-app進行跨平台開發。而其中一個必不可少的功能就是引入外部的CSS文件，以便更好地自訂頁面的樣式。那麼，在uni-app中，我們該如何引入外部的CSS檔案呢？本篇文章將為您一一詳細介紹。

一、在Vue元件中引入外部CSS檔案

在uni-app中，我們可以使用Vue元件來建立頁面。因此，我們可以直接在Vue元件中引入外部的CSS檔案。

首先，在專案的根目錄下建立一個新的CSS文件，例如styles.css。接著，在需要引入CSS的Vue元件中，使用import語句引入該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>

登入後複製

在上面的程式碼中，我們先透過import語句引入了styles.css文件，然後在Vue元件的script標籤中使用該樣式。要注意的是，由於Vue組件中使用的是scoped樣式，所以styles.css中的樣式只會被套用在目前組件中。

二、在HTML頁面中引入外部CSS文件

除了在Vue元件中使用外部CSS文件，我們還可以在HTML頁面中直接引入。這種方法適用於需要在多個Vue元件中共用同一份樣式的情況。

首先，我們同樣需要在專案的根目錄下建立一個新的CSS文件，例如styles.css。接著，在HTML頁面中使用link標籤引入該CSS檔案：

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

登入後複製

在上面的程式碼中，我們使用link標籤引入了styles.css文件，並將其放在了head標籤中。要注意的是，這裡的href屬性中的路徑是以專案根目錄為相對路徑的。

此外，如果需要引入外部CDN連結的CSS庫，我們也可以在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>

登入後複製

在上面的程式碼中，我們使用了Bootstrap的CDN鏈接，並透過link標籤將其引入HTML頁面中。

總結

在uni-app中，我們可以透過在Vue元件或HTML頁面中引入外部的CSS檔案來自訂頁面的樣式。引入方法也有兩種：在Vue元件中使用import語句或在HTML頁面中使用link標籤。同時，我們也可以引入外部CDN連結的CSS庫。希望本篇文章能為大家在uni-app中引入CSS文件提供協助。

以上是uniapp怎麼引入外部css文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！