uniappに外部CSSファイルを導入する方法-uni-app-php.cn

uniappに外部CSSファイルを導入する方法

PHPz

リリース： 2023-04-18 14:52:55

オリジナル

5592 人が閲覧しました

フロントエンドテクノロジーの継続的な開発に伴い、クロスプラットフォーム開発にユニアプリを使用する開発者が増えています。重要な機能の 1 つは、ページのスタイルをより適切にカスタマイズするために外部 CSS ファイルを導入することです。では、uni-app に外部 CSS ファイルを導入するにはどうすればよいでしょうか?この記事では1つずつ詳しく紹介していきます。

1. 外部 CSS ファイルを Vue コンポーネントに導入する

ユニアプリでは、Vue コンポーネントを使用してページを構築できます。したがって、外部 CSS ファイルを Vue コンポーネントに直接導入できます。

まず、プロジェクトのルートディレクトリに、styles.css などの新しい 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 ステートメントによって style.css ファイルを導入し、次にVue コンポーネントのスクリプトこのスタイルをタグで使用します。スコープ付きスタイルは Vue コンポーネントで使用されるため、styles.css 内のスタイルは現在のコンポーネントにのみ適用されることに注意してください。

2. 外部 CSS ファイルを HTML ページに導入する

外部 CSS ファイルを Vue コンポーネントで使用するだけでなく、HTML ページに直接導入することもできます。この方法は、複数の Vue コンポーネント間で同じスタイルを共有する必要がある状況に適しています。

まず、プロジェクトのルートディレクトリに、styles.css などの新しい CSS ファイルを作成する必要もあります。次に、リンクタグを使用して、HTML ページに 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>

ログイン後にコピー

上記のコードでは、リンクタグを使用して、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>

ログイン後にコピー

上記のコードでは、CDN を使用します。 Bootstrap のリンクを取得し、link タグを介して HTML ページに導入します。

概要

ユニアプリでは、外部 CSS ファイルを Vue コンポーネントまたは HTML ページに導入することで、ページのスタイルをカスタマイズできます。導入方法は 2 つあります。Vue コンポーネントの import ステートメントを使用する方法と、HTML ページの link タグを使用する方法です。同時に、外部 CDN にリンクされた CSS ライブラリを導入することもできます。この記事が uni-app に CSS ファイルを導入する一助になれば幸いです。

以上がuniappに外部CSSファイルを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。