Set up Master CSS in Webpack

Guide to setting up Master CSS in your Webpack project.

If you don't have a Webpack project, create one first.

mkdir my-appcd my-appnpm init -ynpm install -D webpack webpack-cli webpack-dev-server

Run the installer in static mode from the Webpack project root. It registers the Webpack plugin and creates the Master CSS entry stylesheet.

npm create @master/css@rc -- --framework webpack --mode static --yes

Run your Webpack development command.

npm run dev

Now style your first element using Master CSS syntax.

localhost:8080

Hello World

The installer registers the Webpack plugin in webpack.config.* and creates src/index.css as the Master CSS entry.

import MasterCSSPlugin from '@master/css.webpack'export default {    plugins: [        new MasterCSSPlugin({ mode: 'static' })    ]}

@import '@master/css';

<h1 class="m:2xl italic font:5xl font:heavy text:neutral">    Hello World</h1>