Nuxt에서 Master CSS 설정하기

Master CSS Nuxt 모듈을 설치하고 Nuxt의 css 옵션으로 CSS 진입점을 불러옵니다. 모듈은 Nuxt의 HTML 렌더링 모드를 바꾸지 않고 CSS 전달을 처리합니다.

#설치

1. #Master CSS 추가하기

   기존 Nuxt 프로젝트의 루트에서 설치 프로그램을 실행하세요. 기본값은 정적 모드로, 완전한 클래스 문자열을 스캔해 일반 CSS를 출력합니다.

   npm create @master/css@2.0.0 -- --framework nuxt --yes

2. #프로젝트 스타일시트 불러오기

   모듈 등록을 유지하고 설치 프로그램이 만든 CSS 진입점을 명시적으로 불러오세요. ~~/는 프로젝트 루트를 가리키며, 애플리케이션 디렉터리가 app/인 Nuxt 프로젝트에서도 같습니다.

   nuxt.config.ts

   export default defineNuxtConfig({  modules: [['@master/css-nuxt', { mode: 'static' }]],  css: ['~~/assets/css/master.css']})

   assets/css/master.css

   @import '@master/css';

3. #Master CSS 사용 시작하기

   개발 서버를 시작하고 첫 컴포넌트에 스타일을 적용하세요. 이 예제들은 Nuxt 4의 app/ 디렉터리를 사용합니다.

app/app.vue

<template>  <p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">    Hello World  </p></template>

중립적인 표면, 얇은 테두리, 작은 모서리 반경과 네 면 각각 1rem의 패딩입니다.

#설정 확인하기

개발 서버가 실행 중일 때 app/app.vue의 p-md를 p-lg로 바꾸세요. 안쪽 여백이 1rem에서 1.5rem으로 늘어나야 합니다. 원래대로 돌린 뒤 앱을 빌드하고 제공하세요. Nuxt의 기본 Node 서버 프리셋을 사용한다면 다음과 같이 실행합니다:

npm run buildnode .output/server/index.mjs

다른 Nitro 배포 프리셋을 사용한다면 해당 제공 절차를 따르세요. Nuxt SSR이 활성화된 상태에서 JavaScript를 끄고 새로고침해도 문단의 안쪽 여백, 둥근 모서리, 떠 있는 표면이 유지되어야 합니다. 정적이라는 말은 CSS 생성 방식을 뜻하며, 클라이언트 전용 Nuxt 페이지를 서버 렌더링 페이지로 바꾸지는 않습니다.

페이지에 스타일이 없다면 먼저 css 옵션이 루트 스타일시트를 불러오는지 확인한 뒤 모듈이 한 번만 등록되었는지 확인하세요. 로드된 CSS에서 .p-md를 찾아보세요. 빌드 성공만으로는 진입점이 페이지에 전달되었다고 확인할 수 없습니다.

#다른 렌더링 모드 선택하기

기본값은 정적 모드입니다. 설치 프로그램 옵션이 모듈의 mode를 설정합니다. 모드를 바꿀 때도 CSS 진입점을 유지하세요:

npm create @master/css@2.0.0 -- --framework nuxt --mode runtime --yes

document.querySelector('#master-check').classList.add('underline')

npm create @master/css@2.0.0 -- --framework nuxt --mode progressive --yes