整合
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@rcimport { defineConfig } from 'vite'import masterCSS from '@master/css.vite' export default defineConfig({ plugins: [ masterCSS({ mode: 'static' }) ]})Import stylesheets
Import Master CSS from Laravel's Vite CSS entry. This stylesheet is also the project CSS entry.
@import '@master/css';@source '../views/**/*.php';Set up code linting
Install the Master CSS ESLint config and HTML parser, then configure ESLint for Blade templates.
Use @angular-eslint/template-parser to parse .blade.php files.
npm i -D @master/eslint-config-css@rc @angular-eslint/template-parser eslintimport htmlParser from '@angular-eslint/template-parser'import css from '@master/eslint-config-css'export default [ { files: ['**/*.blade.php'], languageOptions: { parser: htmlParser } }, ...css ]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:2xl text:neutral font:5xl font:heavy"> Hello World </h1></body>…127.0.0.1:8000