Nuxt3에서 variables 전역으로 설정하자.

Nuxt3에서 variables 전역으로 설정하자.

서론

• 기본적으로 스타일링을 할때, variables를 설정하고 전역으로 설정할수 있게 한다.
• Nuxt 3.6.5 버전 기준으로 해당 글은 작성되었다.
• 여기서 기본적으로 알아둬야 하는것은 Nuxt3는 기본적으로 vite를 사용한다.

Scss 파일 생성하기.

• 해당 경로가 정답은 아니다. 경로는 편한대로 작성한다.

// 브레이크 포인트 변수를 한곳에 모아두기 위해 따로 파일을 만든다.

// /assets/styles/variables/_breakpoints.scss

$xs-down: 'max-width: 375px';
$md-down: 'max-width: 768px';

$mobile: $xs-down;
$tablet: $md-down;

// 모든 변수 파일을 한번에 import해서 관리하기 위해 따로 파일을 만든다.

// /assets/styles/variables.scss

@import 'variables/_breakpoints';

nuxt.config.ts 설정

import {defineNuxtConfig} from "nuxt/config";

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

• 중요한 포인트만 몇개 뽑아본다.
  • 기본적으로 vite에선 scss, sass를 지원한다. scss를 사용하면 scss를 설정한다고, sass를 사용하면 sass를 사용한다고 명시해야 한다.
    • 두개가 변경되면 에러가 발생한다.
  • nuxt3에선 기본적으로 아래와 같이 alias를 설정해둔다.

  {
    "~": "/<rootDir>",
    "@": "/<rootDir>",
    "~~": "/<rootDir>",
    "@@": "/<rootDir>",
    "assets": "/<rootDir>/assets",
    "public": "/<rootDir>/public"
  }
  

  • 위에 방식에 맞춰 alias를 설정해도 되고, 혹은 따로 custom을 했다면 꼭 custom한 alias를 설정해줘야 한다.
• preprocessorOptions이란? CSS 전처리기에 전달할 옵션을 지정합니다. 파일 확장자는 옵션의 키로 사용됩니다. 전처리기에 대한 지원되는 옵션은 각각의 문서에서 찾을 수 있습니다:

결론

• 이렇게 전역으로 설정해두면 매번 할때마다, @use, @import를 할 필요가 없어 훨씬 편하다.
• 아울러 nuxt는 쉽게 alias도 다 설정해둔다. 이런 부분들도 찾아보고 override나, 혹은 피해서 다른걸 사용하는걸 추천한다.
• scss, sass의 오타내기가 쉽다. 오타를 주의하자 😢