Angular에서 Master CSS 설정하기

Angular 빌더는 유지하고 Master CSS CLI로 Angular가 불러올 수 있는 스타일시트를 생성합니다. 개발 중에는 두 감시 프로세스를 함께 실행하세요. Master CSS가 생성 CSS를 갱신하고 Angular는 이를 가져오는 앱을 제공합니다.

이 설정은 전역 src/styles.css, 정상 작동하는 npm start 명령, 지원되는 Node.js 24 버전을 갖춘 기존 브라우저 렌더링 Angular 앱을 전제로 합니다. Angular의 기본 에뮬레이트된 캡슐화를 사용하므로 전역 스타일이 컴포넌트 템플릿에 적용됩니다. Shadow DOM 컴포넌트에는 자체 섀도 루트 안에 스타일이 필요합니다.

#설치

1. #Master CSS 추가하기

   Angular 프로젝트 루트에서 설치 프로그램을 실행하세요:

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

   정적 설정은 @master/css와 @master/css-cli를 추가합니다. 설치 프로그램의 선택적 도구 및 미리보기 옵션은 설치를 참고하세요.

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

   설치 프로그램은 프로젝트 루트에 Master CSS 소스 진입점을 만듭니다:

   master.css

   @import '@master/css';

   기존 내용을 유지하면서 Angular 전역 스타일시트에 다음 가져오기도 추가합니다:

   src/styles.css

   @import './master.generated.css';

   angular.json의 애플리케이션 build.options.styles 배열에 src/styles.css를 유지하세요. 생성된 CSS가 페이지에 전달되는지는 Angular의 전역 스타일 설정이 결정합니다. 비표준 워크스페이스 구조에서는 출력 경로와 가져오기를 함께 조정하세요.

   @theme, @utility 같은 Master CSS 정의는 master.css에 두세요. Angular는 생성된 네이티브 CSS를 사용하며 일반 CSS 빌더는 이런 정의를 컴파일하지 않습니다. src/master.generated.css를 편집하거나 이를 master.css로 다시 가져오지 마세요.

3. #CSS 생성하기

   한 터미널에서 스타일시트를 생성하고 변경 사항을 계속 감시하세요:

   npx master-css generate --output src/master.generated.css --watch

   최초 생성이 끝날 때까지 기다린 뒤 두 번째 터미널에서 Angular를 시작하세요:

   npm start

   두 프로세스를 모두 실행 상태로 유지하세요. Angular 감시 프로세스만으로는 클래스를 추가할 때 Master CSS가 다시 생성되지 않습니다.

4. #Master CSS 사용 시작하기

   루트 컴포넌트가 참조하는 템플릿에 다음 마크업을 추가하세요. Angular의 현재 명명 규칙에서는 보통 src/app/app.html이며, 기존 프로젝트는 src/app/app.component.html을 사용할 수도 있습니다.

   <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 Angular</p>

   생성된 CSS

   @layer theme {  :root,  :host {    --color-zinc-90: oklch(24.6% .0022 265);    --color-zinc-100: oklch(15% .0016 265)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-weight-regular: 400;    --font-size-sm: .875rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --radius-md: .375rem;    --spacing-md: 1rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .bg-surface-raised {    background-color: var(--color-surface-raised)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .font-regular {    font-weight: var(--font-weight-regular)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .p-md {    padding: var(--spacing-md)  }  .w-fit {    width: fit-content  }}

   문단에 중립색 표면, 얇은 테두리, 작은 둥근 모서리와 사방 1rem의 안쪽 여백이 적용됩니다.

#결과 확인하기

Angular 앱을 여세요. 문단의 간격과 표면이 예제와 같아야 합니다. 템플릿의 p-md를 p-lg로 바꾸세요. 두 감시 프로세스가 실행 중이면 안쪽 여백이 1rem에서 1.5rem으로 늘어나야 합니다. 갱신을 확인한 뒤 원래대로 돌립니다.

스타일이 나타나지 않으면 연결 과정을 순서대로 확인하세요:

• Master CSS 터미널에서 생성 오류를 확인하고 src/master.generated.css가 있는지 확인합니다.
• src/styles.css의 가져오기와 angular.json의 해당 파일 등록을 확인합니다.
• 브라우저 개발자 도구로 문단을 검사해 일치하는 규칙과 이를 덮어쓰는 컴포넌트 스타일이 있는지 확인합니다.

정적 생성에는 소스의 완전한 클래스 문자열이나 명시적인 세이프리스트가 필요합니다. 조건부 클래스 이름도 완전한 형태로 유지하고, 동적 값에는 CSS 사용자 지정 속성을 사용하세요. 생성된 출력에 클래스가 없다면 클래스 이름 스캔을 참고하세요.

#배포용 빌드하기

Angular가 앱을 패키징하기 전에 CSS를 생성하세요:

npx master-css generate --output src/master.generated.cssnpm run build

CI에서도 같은 순서를 사용하세요. 이전에 생성된 파일을 제공하면 누락된 스타일이 가려질 수 있으므로 새로 생성한 뒤 프로덕션 빌드를 확인합니다.

정적이라는 말은 CSS 생성 단계를 뜻합니다. 브라우저에서 렌더링되는 Angular 앱이 HTML을 만들려면 여전히 JavaScript가 필요합니다.

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

기본값은 정적 렌더링입니다. 알려진 소스 문자열이 아닌 브라우저 DOM 변경에 따라 클래스를 생성해야 한다면 런타임 렌더링을 사용하세요.

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

@import '@master/css/base.css';

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