Astro에서 Master CSS 설정하기

공유 CSS 진입점으로 Master CSS를 Astro 사이트에 연결합니다. 통합은 정적, 런타임, 점진적 전달을 지원하며 페이지 렌더링은 계속 Astro가 담당합니다.

#설치

1. #Master CSS 추가하기

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

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

2. #스타일시트 연결하기

   설치 프로그램은 독립된 CSS 진입점을 만듭니다:

   src/styles/global.css

   @import '@master/css';

   페이지나 레이아웃의 frontmatter에서 가져오세요. 공유 레이아웃은 이를 사용하는 모든 페이지에 스타일을 전달합니다. astro.config.mjs에서 기존 통합과 함께 Master CSS 통합을 유지하세요.

3. #Master CSS 사용 시작하기

   개발 서버를 시작하세요. 페이지 frontmatter에서 src/styles/global.css를 가져온 뒤 문단을 추가합니다. 여러 페이지에 필요하다면 공유 레이아웃에서 같은 가져오기를 사용하세요.

src/pages/index.astro

---import '../styles/global.css'---<html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>Hello Master CSS</title>  </head>  <body>    <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>  </body></html>

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

#설정 확인하기

npm run dev를 실행하고 p-md를 p-lg로 바꾸어 안쪽 여백이 1rem에서 1.5rem으로 늘어나는지 확인하세요. 원래대로 돌린 뒤 프로덕션 페이지를 테스트합니다:

npm run buildnpm run preview

JavaScript를 끄고 새로고침하세요. 문단의 안쪽 여백, 둥근 모서리, 떠 있는 표면이 유지되어야 합니다. 스타일이 없다면 페이지나 레이아웃에서 global.css를 가져오는지, Astro 설정에 Master CSS 통합이 있는지 확인하세요. 사용자 지정 정의와 범위가 지정된 스타일은 전역 스타일을 참고하세요.

#CLI로 정적 CSS 빌드하기

Astro 통합 대신 이 방법을 사용할 수 있습니다. 다른 통합은 유지하면서 astro.config.mjs에서 Master CSS 등록을 제거하고 페이지나 레이아웃의 global.css 가져오기도 제거하세요. CLI를 설치합니다:

npm install -D @master/css-cli@2.0.0

프로젝트 루트에 소스 진입점을 만드세요. 프로젝트 정의도 이곳에 둡니다:

@import '@master/css';

페이지나 공유 레이아웃의 <head>에서 생성된 스타일시트를 연결하세요:

<link rel="stylesheet" href="/master.css" />

Astro를 빌드하기 전에 CSS를 생성하세요:

npx @master/css-cli generate "src/**/*.{astro,html,js,jsx,ts,tsx,vue,svelte}" --output public/master.cssnpm run buildnpm run preview

개발 중에는 생성 명령에 --watch를 추가하고 두 번째 터미널에서 npm run dev를 실행하세요. Astro는 public/을 빌드 출력으로 복사하므로 생성된 스타일시트와 관련 가져오기를 함께 배포해야 합니다. 기본 경로를 설정한 사이트라면 스타일시트 URL 앞에 해당 경로를 붙이세요. JavaScript를 끄고 문단을 확인합니다.

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

기본값은 정적 모드입니다. 다른 모드에서는 통합이 페이지 런타임 스크립트를 주입하므로 별도의 브라우저 부트스트랩이 필요하지 않습니다:

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

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

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