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 and others
Install the Master CSS and Angular custom webpack plugin into your project via package managers.
npm i @master/css.webpack@rc @angular-builders/custom-webpackSet up static rendering
- Create a
webpack.config.jsfile - Add a
MasterCSSPluginto the plugins
import MasterCSSPlugin from '@master/css.webpack' export default (config) => { config.plugins.push( new MasterCSSPlugin() ) return config } Configure Angular
Use @angular-builders/custom-webpack instead of the default builder for custom webpack configuration.
{ …, "projects": { "my-app": { …, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./webpack.config.js" }, … }, … }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "builder": "@angular-builders/custom-webpack:dev-server", "options": { "browserTarget": "my-app:build" }, … }, … } }, … }}Import stylesheets
Import Master CSS into Angular's app stylesheet src/styles.css. This stylesheet is also the project CSS entry.
Don't import it in the src/main.ts, you'll get some errors about webpack loaders.
/* You can add global styles to this file, and also import other style files */@import '@master/css'; Launch server
Run the development server.
npm run startStart using Master CSS
Now style your first element using Master CSS syntax! Open your browser to watch the changes.
localhost:3000
Hello World
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">Hello World</h1>