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 project
cd 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)
}
})
})
}

© Aoyue Design LLC.
Issue on this page
Edited byAron