.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

相关推荐
宝桥南山1 天前
.NET10 - 尝试一下Blazor Web Assembly Standalone App的fingerprint新特性
microsoft·微软·c#·asp.net·.net·.netcore
刚子编程3 天前
ASP.NET Core Blazor 核心功能一:Blazor依赖注入与状态管理指南
开发语言·.netcore·blazor
是萝卜干呀4 天前
Backend - HTTP请求的常用返回类型(asp .net core MVC)
http·c#·.netcore·iactionresult
精神小伙就是猛4 天前
.Net Core基于EasyCore.EventBus实现事件总线
微服务·.netcore
开发者小天5 天前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
sky-stars5 天前
Visual Studio 2022 安装使用:Entity Framework Core
asp.net·.netcore·visual studio
宝桥南山6 天前
.NET - .NET Aspire的Command-Line和GitHub Copilot
microsoft·微软·c#·asp.net·.net·.netcore
渲吧云渲染8 天前
SaaS模式重构工业软件竞争规则,助力中小企业快速实现数字化转型
大数据·人工智能·sass
刚子编程8 天前
ASP.NET Core Blazor 路由配置和导航
服务器·javascript·.netcore·blazor