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