.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

相关推荐
武藤一雄3 小时前
[.NET] 中 System.Collections.Generic命名空间详解
windows·微软·c#·asp.net·.net·.netcore
cc蒲公英3 天前
less和sass区别
前端·less·sass
van久4 天前
.Net Core 学习:Razor Pages中 HTML 表头字段的两种写法对比
学习·html·.netcore
武藤一雄4 天前
C# 万字拆解线程间通讯?
后端·微软·c#·.net·.netcore·多线程
Focussend智能化营销5 天前
Focussend发布B2B营销自动化成熟度白皮书:从工具到体系的增长跃迁
运维·自动化·sass·内容运营·数字化营销·scrm
武藤一雄5 天前
.NET中到底什么是SignalR (持续更新)
后端·微软·c#·asp.net·.net·.netcore·signalr
by__csdn5 天前
第二章 (.NET Core环境搭建)第二节( Visual Studio Code)
ide·vscode·c#·vue·asp.net·.net·.netcore
by__csdn5 天前
第二章 (.NET Core环境搭建)第三节( Visual Studio for Mac)
ide·kubernetes·c#·asp.net·.net·.netcore·visual studio
武藤一雄7 天前
C#:进程/线程/多线程/AppDomain详解
后端·微软·c#·asp.net·.net·wpf·.netcore
武藤一雄7 天前
C#:Linq大赏
windows·后端·microsoft·c#·.net·.netcore·linq