.NetCoreMVC 开发网页使用sass

sass在前端中可以进行全局设置变量,对前端开发有一定便捷。

1.安装<PackageReference Include="AspNetCore.SassCompiler" Version="1.93.2" />

2.进行配置,在项目目录下添加sasscompiler.json文件。

3.选取的在添加下图内容。

默认源是./Styles文件夹里的scss,运行生成输出到wwwroot/css里,

如果你还有其他地方的.scss文件,可以在"Compilations": [ ]中指定。

4.你只需要在网页里引用生成的 CSS(比如 <link href="~/css/style.css" ...>)就行了。

例子:我只有Styles下的variable.scss文件。

就配置如下

开发时实时修改(如果配置了实时监听):在 Program.cs 里加了 builder.Services.AddSassCompiler(); 后,修改 .scss 文件并保存,会立即自动重新编译,刷新网页就能看到效果(不用重新构建项目)。

官方例子:AspNetCore.SassCompiler/Samples/AspNetCore.SassCompiler.Sample at master · koenvzeijl/AspNetCore.SassCompiler

相关推荐
周杰伦fans2 天前
CommunityToolkit.Mvvm(又称MVVM Toolkit) 与 MvvmLight 的核心区别
开发语言·c#·.netcore
时光追逐者5 天前
C#/.NET/.NET Core技术前沿周刊 | 第 61 期(2025年11.10-11.16)
c#·.net·.netcore
b***74885 天前
前端CSS预处理器对比,Sass与Less
前端·css·sass
百***68047 天前
Vue项目中 安装及使用Sass(scss)
vue.js·sass·scss
你真的可爱呀8 天前
【uniapp实践】主题样式配置浅色深色以及自定义
uni-app·sass
夏霞9 天前
c# ASP.NET Core SignalR 客户端配置自动重连次数
c#·.netcore
BXS_null9 天前
windows、linux/ubuntu 系统运用.net core使用Selenium WebDriver实现自动化测试
linux·ubuntu·.netcore
切糕师学AI11 天前
.NET Core 如何使用 Quartz?
.netcore·quartz·作业调度
聪明努力的积极向上12 天前
【C#】System.Text.Encoding.Default 属性在framework和.netcore中的区别
开发语言·c#·.netcore
切糕师学AI13 天前
.NET Core Web + Vue 项目集成消息推送工具SignalR
vue.js·.netcore·signalr