uniapp에 외부 CSS 파일을 도입하는 방법-uni-app-php.cn

집

웹 프론트엔드

uni-app

uniapp에 외부 CSS 파일을 도입하는 방법

PHPz

Apr 18, 2023 pm 02:09 PM

프론트엔드 기술의 지속적인 개발로 인해 점점 더 많은 개발자가 크로스 플랫폼 개발에 uni-app을 사용하기 시작했습니다. 필수 기능 중 하나는 외부 CSS 파일을 도입하여 페이지 스타일을 더 잘 사용자 정의하는 것입니다. 그렇다면 uni-app에서는 외부 CSS 파일을 어떻게 도입해야 할까요? 이번 글에서는 하나씩 자세히 소개하겠습니다.

1. Vue 구성 요소에 외부 CSS 파일을 도입합니다

uni-app에서는 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 문을 통해 styles.css 파일을 도입한 후 스크립트에서 사용했습니다. Vue 구성 요소 스타일의 태그입니다. 범위가 지정된 스타일은 Vue 구성 요소에서 사용되므로 styles.css의 스타일은 현재 구성 요소에만 적용됩니다.

2. 외부 CSS 파일을 HTML 페이지에 도입

Vue 구성 요소에서 외부 CSS 파일을 사용하는 것 외에도 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>

로그인 후 복사

위 코드에서는 Bootstrap의 CDN 링크를 사용하고 다음을 통해 HTML에 도입합니다. 링크 태그 페이지.

요약

uni-app에서는 외부 CSS 파일을 Vue 구성 요소 또는 HTML 페이지에 도입하여 페이지 스타일을 사용자 정의할 수 있습니다. 소개 방법에는 Vue 구성 요소에서 import 문을 사용하거나 HTML 페이지에서 링크 태그를 사용하는 두 가지 방법이 있습니다. 동시에 외부 CDN에 연결된 CSS 라이브러리도 도입할 수 있습니다. 이 기사가 CSS 파일을 uni-app에 도입하는 데 도움이 되기를 바랍니다.

위 내용은 uniapp에 외부 CSS 파일을 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.