Integrations
Set up Master CSS in Webpack
Guide to setting up Master CSS in your Webpack project.
Create a project
If you don't have a Webpack project, create one first. It's recommended to refer to Getting Started - Webpack
mkdir projectcd projectnpm init -ynpm install webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader style-loader ts-loader --save-devCreate a configuration file
Run the command to create a master.css.js file.
npm create @master/css@rcInstall Master CSS Extractor
Install the Master CSS extractor into your project via package managers.
npm i @master/css.webpack@rcCreate a Webpack config file
Create and configure the webpack.config.js file.
const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const { MasterCSSExtractorPlugin } = require('@master/css.webpack')module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/index.html') }), new MasterCSSExtractorPlugin({ sources: ['./src/index.html'] }) ], devServer: { watchFiles: ['src/**/*'] }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }}Configure a HTML file
Create and configure the src/index.html file.
<!doctype html><html lang="en"><head> <meta charset="utf-8" /></head><body> <h1>Hello World</h1></body></html>Import virtual CSS module
Import the virtual CSS module master.css into the src/index.js.
import 'master.css';Add scripts to package.json
Add start and build scripts to standardize the development process.
{ "scripts": { "dev": "webpack serve --mode development", "build": "webpack --mode production" }}Launch server
Run the development server.
npm run devHello world!
Now style your first element using Master CSS syntax!
<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <script src="./index.js"></script></head><body> <h1 class="italic m:12x fg:strong font:40 font:heavy">Hello World</h1></body></html>Open your browser to watch the changes.
localhost:3000