Getting Started
Set up Master CSS in Angular
A quick guide to start using Master CSS in your Angular project.
Quick start
1. Create a Angular project
If you don't have a Angular project, create one first. It's recommended to refer Angular CLI :
ng new projectcd project
2. Installation
npm install @master/css
3. Configure angular.json
The Angular CLI outputs warnings if it detects that your browser application depends on CommonJS modules.
"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "allowedCommonJsDependencies": [ "@master/css" ] … } …},
4. Import
import '@master/css';import { enableProdMode } from '@angular/core';
5. Launch server
ng serve
Hello world
Now, start developing your UI with Master CSS. 🎉
localhost:4200
Hello World
<h1 class="font:40 font:heavy italic m:50 text:center">
Hello World
</h1>
import '@master/css';import { Style, StyleSheet } from '@master/css';import { render } from '@master/css/render';import { APP_BASE_HREF } from '@angular/common';import * as express from 'express';import { join } from 'path';import { existsSync } from 'fs';import { AppServerModule } from './src/main.server';import { ngExpressEngine } from '@nguniversal/express-engine';let DIST_BROWSER_FOLDER = join(process.cwd(), 'dist/docs/browser')if (!existsSync(DIST_BROWSER_FOLDER)) { DIST_BROWSER_FOLDER = join(process.cwd(), 'browser')}export function app(): express.Express { const server = express() const indexHtml = existsSync(join(DIST_BROWSER_FOLDER, 'index.original.html')) ? 'index.original.html' : 'index'; server.engine('html', ngExpressEngine({ bootstrap: AppServerModule })) server.set('view engine', 'html') server.set('views', DIST_BROWSER_FOLDER) server.get('*.*', express.static(DIST_BROWSER_FOLDER, { maxAge: '1d' })) server.get('*', (req, res) => { res.render(indexHtml, { req, providers: [ { provide: APP_BASE_HREF, useValue: req.baseUrl } ] }, (error: Error, html: string) => { if (error) { console.error(error) } else { res.send(render(html, { StyleSheet }).html) } }) })}