Webpack, Rspack, Rsbuild에서 Master CSS 설정하기

Master CSS를 Webpack, Rspack 또는 Rsbuild 애플리케이션에 빌드합니다. 세 도구 모두 @master/css-webpack을 사용합니다. CSS 진입점은 정의를 제공하고 플러그인은 유틸리티 규칙을 생성하며 HTML 플러그인은 출력을 페이지에 연결합니다. 진입점과 HTML 템플릿을 갖춘 정상 작동하는 앱에서 시작하세요.

#설치

1. #Master CSS 추가하기

   기존 Webpack, Rspack 또는 Rsbuild 프로젝트 루트에서 --framework webpack, rspack 또는 rsbuild를 지정해 설치 프로그램을 실행하세요. 기본값인 정적 모드는 플러그인을 등록하고 src/index.css를 만듭니다.

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

2. #CSS 진입점 가져오기

   설치 프로그램은 @import '@master/css';를 포함한 src/index.css를 만듭니다. 앱의 JavaScript 또는 TypeScript 진입점에서 이를 가져오고 기존 마운트 코드는 유지하세요. 유틸리티가 필요한 모든 페이지에서 불러올 수 있도록 전역 진입점을 사용합니다.

   src/index.js

   import './index.css'

3. #HTML 템플릿을 검사에 포함하기

   별도의 index.html 템플릿에 문단을 넣는 경우 @source로 해당 템플릿을 검사에 포함하세요. 경로는 src/index.css를 기준으로 합니다. HTML 플러그인이 다른 템플릿을 사용하면 경로를 맞춰 변경하세요. 프레임워크 컴포넌트의 클래스는 모듈 의존 관계에서 찾습니다.

   src/index.css

   @import '@master/css';@source '../index.html';

4. #Master CSS 사용 시작하기

   HTML 템플릿이나 프레임워크 컴포넌트에 문단을 넣고 개발 서버를 시작하세요. 별도 템플릿을 수정한 뒤에는 개발 서버의 빌드가 끝나면 페이지를 다시 불러오세요.

index.html

<!doctype html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Master CSS with Webpack</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의 패딩입니다.

#번들러 설정

설치 프로그램은 설정 중 Master CSS 관련 부분을 작성합니다. 기존 설정에 병합하되 프레임워크 플러그인, 진입점, HTML 생성을 유지하고 플러그인은 한 번만 등록하세요.

#Webpack

생성된 스타일시트를 전달하려면 플러그인에 네이티브 CSS 처리와 HtmlWebpackPlugin이 필요합니다:

import HtmlWebpackPlugin from 'html-webpack-plugin'import MasterCSSPlugin from '@master/css-webpack'export default {  entry: './src/index.js',  experiments: { css: true },  module: {    rules: [{ test: /\.css$/i, type: 'css/auto' }]  },  plugins: [    new HtmlWebpackPlugin({ template: './index.html' }),    new MasterCSSPlugin({ mode: 'static' })  ]}

#Rspack

Rspack은 동일한 Webpack 호환 플러그인을 내장 CSS 지원 및 HtmlRspackPlugin과 함께 사용합니다:

import { HtmlRspackPlugin } from '@rspack/core'import MasterCSSPlugin from '@master/css-webpack'export default {  entry: './src/index.js',  module: {    rules: [      {        test: /\.css$/i,        type: 'css/auto'      }    ]  },  plugins: [    new HtmlRspackPlugin({ template: './index.html' }),    new MasterCSSPlugin({ mode: 'static' })  ]}

#Rsbuild

Rsbuild는 tools.rspack 훅으로 플러그인을 등록합니다. 프레임워크 플러그인과 앱을 마운트하는 진입점은 유지하세요. 이 훅은 Master CSS 처리만 추가합니다.

import { defineConfig } from '@rsbuild/core'import MasterCSSPlugin from '@master/css-webpack'export default defineConfig({  tools: {    rspack(config) {      config.plugins ||= []      config.plugins.push(new MasterCSSPlugin({ mode: 'static' }))      return config    }  }})

React 시작 프로젝트에서는 src/App.tsx에 문단을 두세요:

export default function App() {  return (    <p id="master-check" className="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>  )}

#설정 확인하기

먼저 개발 서버가 실행 중일 때 소스의 p-md를 p-lg로 바꾸세요. 문단의 안쪽 여백이 1rem에서 1.5rem으로 늘어나야 합니다. 확인한 뒤 원래대로 돌립니다.

번들러에 맞는 명령으로 빌드하세요:

출력 디렉터리를 HTTP 서버로 제공하세요. 문단에 1rem 안쪽 여백, 떠 있는 표면, 둥근 모서리가 있어야 합니다. 정적 모드의 유틸리티는 Master CSS 런타임 없이 연결된 CSS에서 제공됩니다. JavaScript를 꺼도 HTML 템플릿 내용의 스타일은 유지됩니다. 클라이언트 렌더링 프레임워크는 내용을 만들기 위해 여전히 JavaScript가 필요합니다.

HTML 플러그인은 스타일시트 링크와 필요한 런타임 스크립트를 출력합니다. 개발 서버의 정적 디렉터리에서 직접 제공되는 파일에는 이들이 추가되지 않습니다. CSS 요청이 없다면 HTML 생성을 먼저 확인하세요. 파일이 로드되지만 유틸리티가 없다면 CSS 진입점, 네이티브 CSS 처리, 플러그인 등록을 확인합니다.

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

기본값은 정적 모드입니다. 플러그인의 mode 옵션으로 다른 전달 방식을 선택하며 HTML 플러그인이 해당 런타임 스크립트를 포함합니다:

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

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