.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

相关推荐
We་ct17 小时前
吃透现代CSS全技术体系
前端·css·css3·sass·postcss·预处理器
宝桥南山2 天前
GitHub Models - 尝试一下使用GitHub Models
microsoft·ai·微软·c#·github·.netcore
武藤一雄3 天前
WPF进阶:万字详解WPF如何性能优化
windows·性能优化·c#·.net·wpf·.netcore·鲁棒性
van久7 天前
Day19:Service 业务层(企业架构核心)
.netcore
武藤一雄7 天前
WPF中逻辑树(Logical Tree)与可视化树(Visual Tree)到底是什么
microsoft·c#·.net·wpf·.netcore
武藤一雄10 天前
19个核心算法(C#版)
数据结构·windows·算法·c#·排序算法·.net·.netcore
捧月华如12 天前
CSS预处理器:Sass/Less入门
css·less·sass
van久12 天前
Day17:EF Core 增删改 + 事务
.netcore
MoFe113 天前
【.net core】【watercloud】处理rabbitmq类初始化时获取系统已注入的数据库连接问题(调用已注入服务)
数据库·rabbitmq·.netcore
MoFe117 天前
【.net core】【RabbitMq】rabbitmq在.net core中的简单使用
分布式·rabbitmq·.netcore