.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

相关推荐
willhuo1 天前
基于Playwright的抖音网页自动化浏览器项目使用指南
爬虫·c#·.netcore·webview
csdn_aspnet2 天前
在 .NET Core 8 中实现 CORS
.netcore·跨域·cors·.net8
csdn_aspnet3 天前
在 ASP.NET Core (WebAPI) 中启用 CORS
后端·asp.net·.netcore
西西小飞龙4 天前
Less/Sass Mixins vs. Extend
前端·less·sass
观无4 天前
Windows 本地电脑搭建一个私有的、类似 Gitee 的 Git 服务
gitee·jenkins·.netcore
武藤一雄6 天前
C# 异常(Exception)处理避坑指南
windows·microsoft·c#·.net·.netcore·鲁棒性
csdn_aspnet7 天前
在 ASP.NET Core 中使用自定义属性实现 HTTP 请求和响应加密
http·asp.net·.netcore
观无7 天前
.NET Core + Ocelot 网关 跨域 (CORS) 配置
状态模式·.netcore
csdn_aspnet7 天前
如何在 .NET Core WebAPI 和 Javascript 应用程序中安全地发送/接收密钥参数
javascript·.netcore·cryptojs
武藤一雄10 天前
C# 异步回调与等待机制
前端·microsoft·设计模式·微软·c#·.netcore