整合
Set up Master CSS in Laravel
Guide to setting up Master CSS in your Laravel project.
Create a project
If you don't have a Laravel project, create one first. It's recommended to refer to Installation - Laravel
laravel new my-appInstall Master CSS
Install @master/css.vite plugin into your project.
npm i @master/css.vite@rcCreate a configuration file
Run the command to create a master.css.js file.
npm create @master/css@rcSet up Master CSS
Add a masterCSS vite plugin in vite.config.js.
- Set
options.modetoextract - Add php files to
options.sources
import { defineConfig } from 'vite'import masterCSS from '@master/css.vite' export default defineConfig({ plugins: [ masterCSS({ mode: 'extract', sources: ['resources/views/**/*.php'] }) ]})Launch server
Run Laravel and Vite development servers.
composer run devHello world!
Now style your first element using Master CSS syntax!
…<body> <h1 class="italic m:12x fg:strong font:40 font:heavy"> Hello World </h1></body>…127.0.0.1:8000