6. Styling

Nuxt는 스타일링에 있어서 매우 유연하다. 자신만의 스타일을 작성하거나 로컬 및 외부 스타일시트를 참조하기 위해서 CSS 전처리기, CSS 프레임워크, UI 라이브러리 및 Nuxt 모듈을 사용하여 애플리케이션 스타일을 지정할 수 있다.

 

로컬 스타일시트

로컬 스타일시트를 작성하는 경우 이를 배치하는 자연스러운 장소는 assets/ 디렉토리다.

페이지, 레이아웃 및 구성 요소의 스타일시트를 직접 가져올 수 있다. javascript  또는 CSS 문을 임포트 하기위해 @import 문을 사용할 수 있다.

<!-- 
pages/index.vue
-->

<script>
// Use a static import for server-side compatibility
import '~/assets/css/first.css'

// Caution: Dynamic imports are not server-side compatible
import('~/assets/css/first.css')
</script>

<style>
@import url("~/assets/css/second.css");
</style>

힌트) 위의 경우 스타일시트는 Nuxt가 렌더링한 HTML에 인라인된다.

 

CSS 속성

Nuxt 구성에서 css 속성을 사용할 수도 있다. 스타일시트의 자연스러운 위치는 assets/ 디렉토리다. 이 경우 해당 경로를 참조할 수 있으며 Nuxt는 해당 경로를 애플리케이션의 모든 페이지에 포함한다.

// nuxt.config.ts

export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

힌트) 위의 경우 스타일시트는 Nuxt가 렌더링한 HTML에 인라인되고 전역적으로 주입되어 모든 페이지에 표시된다.

 

폰트

로컬 글꼴 파일의 위치가 디렉터리 ~/public/, 예를 들어 ~/public/fonts 라고 가정했을 때 url() 를 사용하여 스타일시트에서 참조할 수 있다.

/* assets/css/main.css */

@font-face {
  font-family: 'FarAwayGalaxy';
  src: url('/fonts/FarAwayGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

그런 다음 스타일시트, 페이지 또는 구성 요소에서 이름으로 글꼴을 참조하면 된다.

<style>
h1 {
  font-family: 'FarAwayGalaxy', sans-serif;
}
</style>

 

NPM을 통해 배포되는 스타일시트

npm을 통해 배포되는 스타일시트를 참조할 수도 있다. 인기 있는 라이브러리 animate.css 를 예로 들어 보겠다.

먼저 animate.css 를 설치하자.

npm install animate.css

그런 다음 페이지, 레이아웃 및 구성 요소에서 직접 참조할 수 있다.

<!--
app.vue
-->

<script>
import 'animate.css'
</script>

<style>
@import url("animate.css");
</style>

패키지는 Nuxt 구성의 CSS 속성에서 문자열로 참조될 수도 있다.

// nuxt.config.ts

export default defineNuxtConfig({
  css: ['animate.css']
})

 

외부 스타일시트

nuxt.config 파일의 head 섹션에 링크 요소를 추가하여 애플리케이션에 외부 스타일시트를 포함할 수 있다. 다양한 방법을 사용하여 이 결과를 얻을 수 있으며, 로컬 스타일시트도 이와 같이 포함될 수 있다.

Nuxt 구성의 app.head 속성을 사용하여 헤드를 조작할 수 있다.

// nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
    }
}})

 

스타일시트를 동적으로 추가하기

useHead 컴포저블을 사용하여 코드의 헤드에 값을 동적으로 설정할 수 있다.

useHead({
  link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
})

힌트) Nuxt는 내부적으로 unhead 를 사용하며 여기에서 전체 문서를 참조할 수 있다.

 

Nitro 플러그인을 사용하여 렌더링된 헤드 수정

더 고급스런 제어가 필요한 경우 후크를 사용하여 렌더링된 HTML을 가로채고 프로그래밍 방식으로 헤드를 수정할 수 있다.

다음과 같이 플러그인을 만듭니다 ~/server/plugins/my-plugin.ts.

// server/plugins/my-plugin.ts

export default defineNitroPlugin((nitro) => {
    nitro.hooks.hook('render:html', (html) => {
    html.head.push('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">')
  })
})

외부 스타일시트는 렌더링을 차단하는 리소스다. 즉, 브라우저가 페이지를 렌더링하기 전에 로드 및 처리되어야한다. 불필요하게 큰 스타일이 포함된 웹 페이지는 렌더링하는 데 시간이 더 오래 걸린다. 이에 대한 자세한 내용은 web.dev 에서 읽어볼 수 있다.

 

전처리기 사용

SCSS, Sass, Less 또는 Stylus와 같은 전처리기를 사용하려면 먼저 설치가 필요하다.

# Sass & SCSS
npm install sass

# Less
npm install less

# Stylus
npm install stylus

스타일시트를 작성하는 가장 자연스러운 장소는 assets디렉토리다. 그런 다음 전처리기의 구문을 사용하여 소스 파일을 사용자(또는 레이아웃 파일) app.vue 로 가져올 수 있다.

<!--
pages/app.vue
-->

<style lang="scss">
@use "~/assets/scss/main.scss";
</style>

또는Nuxt 구성의  css 속성을 사용할 수 있다.

// nuxt.config.ts

export default defineNuxtConfig({
  css: ['~/assets/scss/main.scss']
})

힌트) 두 경우 모두, 컴파일된 스타일시트는 Nuxt가 렌더링한 HTML에 인라인된다.

 

색상 변수가 있는 sass 부분 과 같이 사전 처리된 파일에 코드를 삽입해야 하는 경우 vite preprocessors 옵션을 사용하면 된다.

 

assets 디렉터리에 일부분을 만든다.

/* assets/_colors.acss */

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

그런 다음 nuxt.config 파일에

// nuxt.config.ts

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

Nuxt는 기본적으로 Vite를 사용한다. 대신 webpack을 사용하려면 각 전처리기 로더문서를 참고하자.

 

단일 파일 구성 요소(SFC) 스타일 지정

Vue와 SFC의 가장 장점중 하나는 스타일링을 자연스럽게 처리하는 데 매우 뛰어나다는 것이다. 컴포넌트 파일의 스타일 블록에 CSS 또는 전처리기 코드를 직접 작성할 수 있으므로 CSS-in-JS와 같은 것을 사용하지 않고도 환상적인 개발자 경험을 누릴 수 있다. 그러나 CSS-in-JS를 사용하려는 경우 이를 지원하는 제3자 라이브러리 및 모듈(예: pinceau ) 을 찾을 수 있다.

SFC의 구성 요소 스타일링에 대한 포괄적인 참조는 Vue 문서를 참조할 수 있다 .

클래스 및 스타일 바인딩

Vue SFC 기능을 활용하여 클래스 및 스타일 속성으로 구성 요소의 스타일을 지정할 수 있다.

<!-- 
Ref and Reactive
-->

<script setup lang="ts">
const isActive = ref(true)
const hasError = ref(false)
const classObject = reactive({
  active: true,
  'text-danger': false
})
</script>

<template>
  <div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
  <div :class="classObject"></div>
</template>

<!--
Computed
-->

<script setup lang="ts">
const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))
</script>

<template>
  <div :class="classObject"></div>
</template>

<!--
Array
-->

<script setup lang="ts"> 
const isActive = ref(true)
const errorClass = ref('text-danger')
</script>

<template>
  <div :class="[{ active: isActive }, errorClass]"></div>
</template>

<!--
Style
-->

<script setup lang="ts">
const activeColor = ref('red')
const fontSize = ref(30)
const styleObject = reactive({ color: 'red', fontSize: '13px' })
</script>

<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  <div :style="[baseStyles, overridingStyles]"></div>
  <div :style="styleObject"></div>
</template>

 

동적 스타일 v-bind

v-bind 함수를 사용하여 스타일 블록 내에서 JavaScript 변수 및 표현식을 참조할 수 있다. 이 경우 바인딩은 동적이다. 즉, 변수 값이 변경되면 스타일이 업데이트된다.

<script setup lang="ts">
const color = ref("red")
</script>

<template>
  <div class="text">hello</div>
</template>

<style>
.text {
  color: v-bind(color);
}
</style>

 

범위가 지정된 스타일

범위가 지정된 속성을 사용하면 구성요소의 스타일을 개별적으로 지정할 수 있다. 이 속성으로 선언된 스타일은 이 구성요소에만 적용된다.

<template>
  <div class="example">hi</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

CSS Modue

module 속성과 함께 CSS Module 을 사용할 수 있습니다 . 주입된  $style 변수를 사용하여 액세스한다.

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

 

전처리기 지원

SFC 스타일 블록은 전처리기 구문을 지원한다. Vite에는 구성 없이 .scss, .sass, .less, .styl 및 .stylus 파일에 대한 지원이 내장되어 있다. 사전에 설치하기만 하면 SFC에서 lang 속성을 통해 직접 사용할 수 있다.

<!--
SCSS
-->
<style lang="scss">
  /* Write scss here */
</style>


<!--
SASS
-->
<style lang="sass">
  /* Write sass here */
</style>


<!--
LESS
-->
<style lang="less">
  /* Write less here */
</style>


<!--
Stylus
-->
<style lang="stylus">
  /* Write stylus here */
</style>

Vite CSS 문서 및 @vitejs/plugin-vue 문서를 참조할 수 있습니다 . webpack 사용자는 vue loader docs 를 참고하자.

 

PostCSS 사용

Nuxt에는 postcss가 내장되어 있다. nuxt.config 파일 에서 구성할 수 있다.

// nuxt.config.ts

export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-nested': {}
      "postcss-custom-media": {}
    }
  }
})

SFC에서 적절한 구문 강조를 위해 postcss lang 속성을 사용할 수 있다.

<style lang="postcss">
  /* Write stylus here */
</style>

기본적으로 Nuxt에는 다음 플러그인이 이미 사전 구성되어 있다:

• postcss-import : @import 규칙 개선.
• postcss-url : url() 명령문을 변환.
• autoprefixer : 공급업체 접두사를 자동으로 추가.
• cssnano : 축소 및 제거.

다양한 스타일에 대한 레이아웃 활용

애플리케이션의 여러 부분을 완전히 다른 스타일로 지정해야 하는 경우 레이아웃을 사용할 수 있다. 다양한 레이아웃에 다양한 스타일을 사용해보자.

<template>
  <div class="default-layout">
    <h1>Default Layout</h1>
    <slot />
  </div>
</template>

<style>
.default-layout {
  color: red;
}
</style>

참고) 레이아웃

 

타사 라이브러리 및 모듈

Nuxt는 스타일링에 있어서 독단적이지 않으며 다양한 옵션을 제공한다. UnoCSS 또는 Tailwind CSS 와 같은 널리 사용되는 라이브러리 등 원하는 스타일 도구를 사용할 수 있다.

커뮤니티와 Nuxt 팀은 통합을 더 쉽게 만들기 위해 많은 Nuxt 모듈을 개발했다. 웹사이트의 모듈 섹션 에서 찾을 수 있다 . 다음은 시작하는 데 도움이 되는 몇 가지 모듈이다.

• UnoCSS : 즉각적인 온디멘드 원자 CSS 엔진.
• Tailwind CSS : 유틸리티 우선 CSS 프레임워크.
• Fontaine : 글꼴 메트릭 폴백
• Pinceau : 적응형 스타일링 프레임워크.
• Nuxt UI : 최신 웹 앱을 위한 UI 라이브러리.

Nuxt 모듈은 즉시 사용 가능한 훌륭한 개발자 경험을 제공하지만, 즐겨 사용하는 도구에 모듈이 없다고 해서 Nuxt와 함께 사용할 수 없다는 의미는 아니다. 자신의 프로젝트에 맞게 직접 구성할 수 있다. 도구에 따라 Nuxt 플러그인을 사용 하거나 자신만의 모듈을 만들어야 할 수도 있다. 그럴경우 커뮤니티 와 공유하자!

쉽게 웹폰트 로드

Nuxt Google Fonts 모듈을 사용하여 Google Fonts를 로드 할 수 있다 .

UnoCSS를 사용하는 경우 Google 글꼴 등을 포함된 일반 공급자의 글꼴을 편리하게 로드할 수 있는 웹 글꼴 사전 설정이 함께 제공된다.

 

Transition

Nuxt는 Vue와 동일한 <Transition> 요소를 제공하며 실험적인 View Transitions API 도 지원합니다.

 

 

글꼴 고급 최적화

CLS를 줄이려면 Fontaine을 사용하는 것이 좋다 . 더 고급 기능이 필요한 경우 Nuxt 모듈을 생성하여 빌드 프로세스 또는 Nuxt 런타임을 확장하는 것을 고려해봐야한다.

응용 프로그램의 스타일을 보다 쉽고 효율적으로 만들려면 웹 생태계에서 사용할 수 있는 다양한 도구와 기술을 활용하는 것을 항상 기억하자. 네이티브 CSS, 전처리기, postcss, UI 라이브러리 또는 모듈을 사용하든 Nuxt가 도와준다.

LCP 고급 최적화

전역 CSS 파일의 다운로드 속도를 높이려면 다음을 수행할 수 있다.

• 파일이 사용자에게 물리적으로 더 가깝도록 CDN을 사용.
• Brotli를 사용하여 애셋을 압축.
• 전송에 HTTP2/HTTP3 사용
• 동일한 도메인에 애셋을 호스팅(다른 하위 도메인을 사용하지 말것).

Cloudflare, Netlify 또는 Vercel과 같은 최신 플랫폼을 사용하는 경우 이러한 작업의 대부분은 자동으로 수행되어야 한다. web.dev 에서 LCP 최적화 가이드를 찾을 수 있다 .

모든 CSS가 Nuxt에 의해 인라인되면 렌더링된 HTML에서 외부 CSS 파일이 참조되는 것을 (실험적으로) 완전히 중지할 수 있다. 모듈이나 Nuxt 구성 파일에 배치할 수 있는 후크를 사용하면된다.

// nuxt.config.ts

export default defineNuxtConfig({
  hooks: {
    'build:manifest': (manifest) => {
      // find the app entry, css list
      const css = manifest['node_modules/nuxt/dist/app/entry.js']?.css
      if (css) {
        // start from the end of the array and go to the beginning
        for (let i = css.length - 1; i >= 0; i--) {
          // if it starts with 'entry', remove it from the list
          if (css[i].startsWith('entry')) css.splice(i, 1)
        }
      }
    },
  },
})