Integrations
Set up Master CSS in Angular
Guide to setting up Master CSS in your Angular project.
Create a project
If you don't have a Angular project, create one first. It's recommended to refer Angular CLI.
ng new my-appcd my-appInstall Master CSS
Install Master CSS into your project via package managers.
npm i @master/css@rc @master/css-runtime@rcSet up CSS runtime engine
Initialize the runtime engine in the entry file src/main.ts.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';import defaultManifest from '@master/css-preset/default-manifest.json' with { type: 'json' }; import { CSSRuntime } from '@master/css-runtime'; CSSRuntime.create({ manifest: defaultManifest }).observe(); platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));Import the default stylesheet
Import Master CSS from Angular's app stylesheet. This stylesheet is also the project CSS entry.
@import '@master/css';Prevent flash of unstyled content
Add <html hidden> to avoid FOUC caused by the runtime engine not yet injecting CSS rules.
<!doctype html><html lang="en" hidden>Launch server
Run the development server.
npm run startStart using Master CSS
Now style your first element using Master CSS syntax!
<h1 class="italic m:2xl text:neutral font:5xl font:heavy">Hello World</h1>Open your browser to watch the changes.
localhost:3000