Getting Started

Set up Master CSS in Webpack

Here's a quick guide to set up Master CSS in Webpack.

Quick start

1. Create a Webpack project

If you don't have a Webpack project, create one first. It's recommended to refer Getting Started :

mkdir project
cd project
npm init -y 
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

2. Installation

npm install @master/css

3. Import

Create a index.html and src/index.js.

import '@master/css';
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
    <script src="./src/index.js"></script>
    ...
</head>
</html>

4. Configure

Install package.json.

{
  "name": "project",
  "scripts": {
    "start": "npx webpack serve",
    "build": "webpack --mode production"
  },
  ...
}

Install webpack.config.js.

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "index.html")
        })
    ]
};

5. Launch server

npx webpack serve

Hello world

Now, start developing your UI with Master CSS. 🎉

localhost:8080

Hello World

<h1 class="font:40 font:heavy italic m:50 text:center">
    Hello World
</h1>

Hybrid rendering

We devised a hybrid architecture that allows you to pre-generate CSS from HTML on the server side, and then continue to use JIT on the client side by reverse parsing.

More to come ... 🚧

© Aoyue Design LLC.
Issue on this page
Edited byLola