Use SCSS with ASP.NET Core 5.x or 3.X

Here we will see how we can use SCSS or SASS with ASP.NET Core 3.X or 5.X

Here is the step to step guide for using SCSS in ASP.NET Core.

Step 1:

Install sass as global using npm:

npm install --global sass
Bash

Step 2:

Create a new ASP.NET Core project , choose MVC or Razor Pages

Add a SCSS file to the Web app, here I have added test.scss to the wwwroot/css folder.

Add the following lines to the .csproj file to enable SCSS to CSS compilation in the web app.

For node-sass and ruby-sass write this:

sass --no-source-map $(ProjectDir)wwwroot/css/test2.scss $(ProjectDir)wwwroot/css/test2.css
Bash

If you're using dart-sass

If you're using dart-sass the usage is --no-source-map

sass --no-source-map $(ProjectDir)wwwroot/css/test2.scss $(ProjectDir)wwwroot/css/test2.css
Bash

 

<Target Name="ScsstoCss" BeforeTargets="Build">
<Exec Command="mkdir $(ProjectDir)wwwroot/css" Condition="!Exists('$(ProjectDir)wwwroot/css')" />

<Exec Command="sass --no-source-map $(ProjectDir)wwwroot/css/test2.scss $(ProjectDir)wwwroot/css/test2.css" />
	</Target>
Markup

Step 3:

Enable Razor Runtime Compilation in the StartUp.cs file

//for MVC
services.AddControllersWithViews().AddRazorRuntimeCompilation();

//for Razor Pages
services.AddRazorPages().AddRazorRuntimeCompilation();
C#

Alternative Solution

You can use the Visual Studio 2019 extension that can help you convert SCSS to CSS.

Install the VS IDE Extension

Right click to convert the file to CSS

 

Thanks for reading


Comments

Post a Comment

Popular posts from this blog

Building a Login Flow with .NET MAUI

Image
​ Let's build a Login Flow with .NET MAUI with Shell. Authentication in any mobile app is very common. Lets get started with this. Its obvious that it should ask for login only if it isn't authenticated. We will check for authentication , if not there we will move to Login page if login is success we will move to the Home page. For this example we will override the backbutton pressed event to quit the application but you can customize accordingly as per your need. For this post I am using a simple authentication but you can use JWT or any method you want.  Here is the example of the login flow:       All the pages that has to be used needs  to be registered with the Shell. If you are a bit familier with the Shell navigation the first content page is the one which is displayed after startup. So we need to structure the shell accordingly in order. The pages we are using here for the example: LoadingPage LoginPage HomePage SettingsPage Here is the AppShell.xaml <
Read more

Generate PySpark Schema dynamically in Python from JSON Sample

 Hi Folks, If you need to genarate pyspark schema from JSON you can always my tool here  https://preetranjan.github.io/pyspark-schema-generator/ but if you need to do it in Python then here is the code snippet for it. It takes a python dictionary as input and generates the PySpark schema. import json from pyspark.sql.types import * def GeneratePySparkSchema ( json ):     fields = []     for key , value in json.items ():         if isinstance ( value , dict ):             field = StructField ( key , GeneratePySparkSchema ( value ), True )         elif isinstance ( value , list ):             if len ( value ) == 0 :                 field = StructField ( key , ArrayType ( StringType ()), True )             elif isinstance ( value [ 0 ], dict ):                 field = StructField (                     key , ArrayType ( GeneratePySparkSchema ( value [ 0 ]), True )                 )             else :                 field = StructField ( key , ArrayType ( GetSparkData
Read more