Add sample with SASS integration

Author: gunndabad

samples/Samples.Sass/.gitignore

@@ -0,0 +1,2 @@
+govuk-frontend
+wwwroot/assets

samples/Samples.Sass/Pages/Index.cshtml

@@ -0,0 +1,3 @@
+@page
+
+<h1 class="govuk-heading-l">SASS sample</h1>

samples/Samples.Sass/Pages/Shared/_Layout.cshtml

@@ -0,0 +1,9 @@
+@{
+    Layout = "_GovUkPageTemplate";
+}
+
+@section Head {
+    <link rel="stylesheet" asp-href-include="~/site.css" asp-append-version="true">
+}
+
+@RenderBody()

samples/Samples.Sass/Pages/_ViewImports.cshtml

@@ -0,0 +1,3 @@
+@using Samples.Sass
+@namespace Samples.Sass.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

samples/Samples.Sass/Pages/_ViewStart.cshtml

@@ -0,0 +1,3 @@
+@{
+    Layout = "_Layout";
+}

samples/Samples.Sass/Program.cs

@@ -0,0 +1,29 @@
+using GovUk.Frontend.AspNetCore;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddRazorPages();
+
+builder.Services.AddGovUkFrontend();
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+    app.UseExceptionHandler("/Error");
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+app.UseStaticFiles();
+
+app.UseRouting();
+
+app.UseAuthorization();
+
+app.MapRazorPages();
+
+app.Run();

samples/Samples.Sass/README.md

@@ -0,0 +1,54 @@
+# Sample with SASS integration
+
+This sample demonstrates how to set up a project with SASS that can reference the `govuk-frontend` scss source files.
+
+To replicate this setup in your own project, follow these steps:
+
+1. Install the `GovUk.Frontend.AspNetCore` package:
+   ```shell
+   dotnet add package GovUk.Frontend.AspNetCore
+   ```
+
+2. Add services to your application:
+    ```cs
+    builder.Services.AddGovUkFrontend();
+    ```
+
+3. Enable `govuk-frontend` package restore on build by adding the following to your `.csproj` file:
+   ```xml
+   <PropertyGroup>
+     <RestoreGovUkFrontendNpmPackage>true</RestoreGovUkFrontendNpmPackage>
+   </PropertyGroup>
+   ```
+This will copy the contents of the `govuk-frontend` NPM package into your project.
+
+> [!WARNING]
+> When you enable `RestoreGovUkFrontendNpmPackage`, the automatic hosting of `govuk-frontend` files is disabled.
+> By default, the static assets will be copied to `wwwroot/assets`.
+> You must ensure that the required CSS and JavaScript is available.
+
+> [!NOTE]
+> Add `wwwroot/assets` and `govuk-frontend` to your `.gitignore` file to avoid committing the copied files to your repository.
+
+4. Install the `DartSassBuilder` package:
+   ```shell
+   dotnet add package DartSassBuilder
+   ```
+
+5. Configure SASS compilation by adding the following to your `.csproj` file:
+   ```xml
+   <PropertyGroup>
+     <EnableDefaultSassItems>false</EnableDefaultSassItems>
+   </PropertyGroup>
+
+   <ItemGroup>
+     <SassFile Include="wwwroot/*.scss" Exclude="govuk-frontend/**/*.css" />
+   </ItemGroup>
+   ```
+
+6. Create your SASS files in the `wwwroot` directory. From there you can import the govuk-frontend styles. For example, create a file named `main.scss` in the `wwwroot` directory with the following content:
+   ```scss
+   @import "govuk-frontend/govuk/all";
+
+   /* your custom styles here */
+   ```

samples/Samples.Sass/Samples.Sass.csproj

@@ -0,0 +1,26 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <RestoreGovUkFrontendNpmPackage>true</RestoreGovUkFrontendNpmPackage>
+    <EnableDefaultSassItems>false</EnableDefaultSassItems>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="DartSassBuilder" Version="1.1.0" />
+    <PackageReference Include="GovUk.Frontend.AspNetCore" Version="3.2.*-*" />
+  </ItemGroup>
+  
+  <ItemGroup>
+    <SassFile Include="wwwroot/site.scss" Exclude="govuk-frontend/**/*.css" />
+  </ItemGroup>
+  
+  <Target Name="CopyJavaScriptToWwwroot" BeforeTargets="Build">
+    <Copy SourceFiles="govuk-frontend/govuk-frontend.min.js" 
+          DestinationFolder="wwwroot" 
+          SkipUnchangedFiles="true" />
+  </Target>
+
+</Project>

samples/Samples.Sass/appsettings.Development.json

@@ -0,0 +1,9 @@
+{
+  "DetailedErrors": true,
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

samples/Samples.Sass/appsettings.json

@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*"
+}