5. Assets

// scss 인 경우

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/_colors.scss" as *;'
        }
      }
    }
  }
})

Nuxt는 두 개의 디렉토리를 사용하여 스타일시트, 글꼴 또는 이미지와 같은 애셋을 처리한다.

• .public/ 디렉터리 콘텐츠는 서버 루트에서 그냥 그대로 제공된다
• .assets/ 디렉터리 에는 일반적으로 빌드 도구(Vite 또는 webpack)에서 처리할 모든 애셋이 포함된다

public  디렉토리

public/ 디렉토리는 애플리케이션의 정의된 URL에서 공개적으로 사용 가능한 정적 자산이다.
애플리케이션의 코드나 브라우저의 루트 URL을 통해 public/ 디렉터리에 있는 파일을 가져올 수 있다 .

예)
아래 예는, 정적 URL에서 사용할 수 있는 public/img/ 디렉터리의  /img/nuxt.png 이미지 파일을 참조한다.

<!--
app.vue
-->

<template>
  <img src="/img/nuxt.png" alt="Discover Nuxt 3" />
</template>

 

assets 디렉토리

Nuxt는 Vite (기본값) 또는 webpack을 사용하여 애플리케이션을 빌드하고 번들링한다. 이러한 빌드 도구의 주요 기능은 JavaScript 파일을 처리하는 것이지만 플러그인 (Vite 용) 또는 로더 (webpack 용)를 통해 스타일시트, 글꼴 또는 SVG와 같은 다른 종류의 애셋을 처리하도록 확장할 수 있다. 이 단계에서는 주로 성능이나 캐싱 목적(예: 스타일시트 축소 또는 브라우저 캐시 무효화)을 위해 원본 파일을 변환한다.

관례적으로 Nuxt는 assets/ 디렉터리를 사용하여 이러한 파일을 저장하지만 이 디렉터리에 대한 자동 스캔 기능은 없으며 다른 이름을 사용할 수 있다.

애플리케이션 코드에서 ~assets/ 경로를 사용하여 디렉터리 assets/ 에 있는 파일을 참조할 수 있다.

예)
예를 들어 빌드 도구가 이 파일 확장자를 처리하도록 구성된 경우 아래와 같이 처리될 이미지 파일을 참조한다.

<!--
app.vue
-->

<template>
  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
</template>

 

전역 스타일 임포트

Nuxt 구성 요소 스타일에 명령문을 전역적으로 삽입하려면 nuxt.config 파일 에서 Vite 옵션을 사용할 수 있다.

 

예를 들어 컴포넌트나 페이지에 스타일에  전역적으로 색깔을 포함하는 sass 를 삽입하려면 아래 예시처럼 하면된다.

/* assets/_colors.scss */

$primary: #49240F;
$secondary: #E4A79D;

혹은 (요샌 거의 scss)

/* assets/_colors.saas */

$primary: #49240F
$secondary: #E4A79D

위 예의 경우 nuxt.config 는 아래와 같이 구성된다.

// scss 인 경우

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/_colors.scss" as *;'
        }
      }
    }
  }
})

// sass 인 경우

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        sass: {
          additionalData: '@use "~/assets/_colors.sass" as *\n'
        }
      }
    }
  }
})