How to use with Hot Reload?

[kabforks]

Hello, and thanks for this wonderful tool.

Currently, I'm working with a lot of SCSS files, and after each edit I ALT+TAB out to my Terminal and enter lsb. Then lsb transforms all my *.scss files into *.css. dotnet will pick up these file changes, and then the gui is refreshed with new and fancy styles.

Is it possible to watch for changes in *.scss files and run lsb upon save (a change in scss-file)? It's getting tedious to run lsb upon each edit...

I'm using 6.0.0-rc.1.21452.15.

[mikart143]

This would be great feature for Blazor

[johan-v-r]

Hi there - yes the *.scss files are watched by default with this NuGet package installed in your .NET project.

You shouldn't have to use (or even install) the CLI tool for this purpose.

[mikart143]

@johan-v-r I do not know if I understood you correctly. I can run my app, edit sass/scss file and this wil be automatically converted to css ? I tried this with blazor server on .Net 5 and It was not working.

[johan-v-r]

If you run your app with dotnet watch then yes it will rebuild when you save a Sass file.
If you don't come right, could you create a sample project so I can replicate & test?

[Socolin]

@johan-v-r Hello, on my side with dotnet watch it's working but it do a full rebuild on each change on .scss files is that normal ? if yes I would be nice to to get it to avoid rebuild each time.

watch : File changed: /xxxxxx/Component.razor.scss.
watch : Exited
watch : Building...

<PackageReference Include="LibSassBuilder" Version="1.6.4" />

[nanocortex]

Has someone managed to use dotnet watch with this plugin, without full rebuild on each change?

[SacredSkull]

Struggling to get this working as well.

Just in case you're not aware @johan-v-r this is Hot Reload we're talking about (not auto-builds) - specifically .NET/Blazor Watch's handling of Browser resource hot reloads:

info: Microsoft.Hosting.Lifetime[0]
      Content root path: /Users/.../Personal Projects/BlazorTutorial/
watch : File changed: /Users/.../Personal Projects/BlazorTutorial/Shared/NavMenu.razor.css.
watch : Hot reload of scoped css succeeded

That is what happens if you change a single CSS file and is what is referred to as a hot-reload - the resource/content file is updated on the server and re-sent to the browser without any full project build occuring.

On the otherhand, here is what happens if I do the same to a SCSS file:

info: Microsoft.Hosting.Lifetime[0]
      Content root path: /Users/.../Personal Projects/BlazorTutorial/
watch : File changed: /Users/.../Personal Projects/BlazorTutorial/Shared/MainLayout.razor.scss.
watch : Do you want to restart your app - Yes (y) / No (n) / Always (a) / Never (v)?

It seems like your plugin enforces some strict watch rules because ignoring changes to SCSS files does not work (same output as above):

<ItemGroup>
  <None Include="**/*.scss" />
</ItemGroup>

I don't know too much about MSBuild and its targets but is it possible to trigger this package's build without requiring a full watch/build on SCSS files?

[bachratyg]

As far as I can tell when hot reload (dotnet watch without args) detects a file change the following happens:

• if the file is a static file (the Watch item has a StaticWebAssetPath metadata, e.g. all Content files under wwwroot/) then reload the browser window
• if the file extension is .razor.css or .cshtml.css then rebuild scoped css and apply changes without restarting the app
• if the file extension is .cs or .razor or .cshtml then use Edit&Continue on the c# source to apply changes (if it's a supported edit)
• everything else is considered a "rude" edit (i.e. prompt to restart the entire app)

All of this is more or less hardwired in dotnet-watch, adding sass as Watch items simply won't work, a change is always considered a rude edit. However a separate dotnet-watch instance can be configured to handle sass like this:

Add this to your main csproj:

<ItemGroup>
	<!-- exclude sass files from main dotnet watch -->
	<SassFile Update="@(SassFile)" Watch="false" />
</ItemGroup>
<!-- expose sass source files to helper project -->
<Target Name="CollectSassItems" Outputs="@(SassFile)" />

Create a new proj file e.g. Sass.proj next to your csproj or sln or wherever. This is a helper project that configures dotnet-watch to handle sass only. Unfortunately dotnet-watch cannot handle different project configurations, a separate project is needed.

<Project DefaultTargets="SassBuild">
	<PropertyGroup>
		<CustomCollectWatchItems>$(CustomCollectWatchItems);SassCollectWatchItems</CustomCollectWatchItems>
		<!-- this is needed or else the watch process fails with NRE -->
		<TargetFramework>net6.0</TargetFramework>
		<!-- Path to your project here with the sass files to compile -->
		<SassProject>Path\To\YourProjectThatHasSassToBuild.csproj</SassProject>
	</PropertyGroup>

	<!-- collect sass files from main project -->
	<Target Name="SassCollectWatchItems">
		<MSBuild Projects="$(SassProject)" Targets="CollectSassItems" BuildInParallel="true">
			<Output TaskParameter="TargetOutputs" ItemName="Watch" />
		</MSBuild>
	</Target>

	<!-- invoke sass compilation in the main project -->
	<Target Name="SassBuild">
		<MSBuild Projects="$(SassProject)" Targets="LibSass_DetermineBuildNeeded;LibSass_BuildArgsFromFileList;LibSass_Build" BuildInParallel="true" />
	</Target>

	<Import Project="$(MSBuildExtensionsPath)\Microsoft.Common.targets"/>
</Project>

then finally run

dotnet watch --project Sass.proj msbuild

This will run the LibSass pipeline for every changed sass, then the main dotnet watch will pick up the changed sass output.

[warappa]

I tried @bachratyg's workaround, but dotnet watch still reloaded my whole application on each scss-file change.

To make dotnet watch really ignore scss-file changes, not only you must use

<ItemGroup>
	<!-- exclude sass files from main dotnet watch -->
	<SassFile Update="@(SassFile)" Watch="false" />
</ItemGroup>

but also add the same for Content elements. So the resulting edit is:

<ItemGroup>
	<!-- exclude sass files from main dotnet watch -->
	<SassFile Update="@(SassFile)" Watch="false" />
        <!-- tell main dotnet watch to really ignore scss files -->
	<Content Update="@(SassFile)" Watch="false" />
</ItemGroup>

Info

LibSassBuilder: 2.0.1
.NET: 6.0

[bachratyg]

@warappa you may have scss under wwwroot that gets picked up as Content and triggers a browser refresh on change. Since you probably don't want them published you can simply exclude them:

<Content Remove="wwwroot/**/*.scss" />

[warappa]

@bachratyg You're right, excluding them is actually better 👍

[dawiduniec]

My VS is picking changes in css files automatically, but build of sass files happen only on run, is there a way to force it to compile on save?