Set up Master CSS in ASP.NET Core
Guide to setting up Master CSS in ASP.NET Core Razor Pages or MVC projects.
Use static rendering when ASP.NET Core Razor Pages or MVC views contain complete class strings and you want Vite to build a generated CSS asset before .NET serves the page.
Create a project
If you do not have an ASP.NET Core project, create one first.
dotnet new webapp -o my-appcd my-appnpm init -yInstall Vite and Master CSS
Install Vite and the Master CSS Vite integration in the project root.
npm install -D vite @master/css.vite@rcConfigure Vite
Build static CSS into wwwroot/assets.
import { defineConfig } from 'vite'import masterCSS from '@master/css.vite'export default defineConfig({ plugins: [ masterCSS({ mode: 'static' }) ], build: { outDir: 'wwwroot/assets', emptyOutDir: true, rollupOptions: { input: 'src/main.ts', output: { entryFileNames: 'app.js', assetFileNames: 'app[extname]' } } }})Create the asset entry
Import Master CSS and scan Razor Pages and MVC views where classes are authored.
import './app.css'@import "@master/css";@source "../Pages/**/*.cshtml";@source "../Views/**/*.cshtml";@source not "../bin/**";@source not "../obj/**";Load the stylesheet
Reference the generated CSS from your shared layout.
<link rel="stylesheet" href="~/assets/app.css" asp-append-version="true">Hello world
Now style your first Razor page using Master CSS syntax.
Hello World
<h1 class="m:2xl italic font:5xl font:heavy text:neutral"> Hello World</h1>Static rendering depends on complete class strings in scanned source files. If a Razor view assembles class names from fragments, map states to complete class strings or add bounded candidates with @safelist.