[Doc] Getting started with sass

[ggomarighetti]

Hi, it would be nice to add to the main website, a guide on how to start a project by compiling the Bootstrap scss/sass files to customize them.

This way we only need two files in our app.razor, and they would be both locally, without the need to instantiate the cdn, at the same time we can customize it as much as we want.

I attach my files to do it, and a link to the official bootstrap guide, I hope I can make a pull request and send it with the changes in the documentation, or if someone can before, better.

Greetings.

bootstrap.scss

@import "../node_modules/bootstrap/scss/bootstrap";
@import url("../wwwroot/_content/Havit.Blazor.Components.Web.Bootstrap/defaults.css");

package.json

{
"dependencies": {
"bootstrap": "^5.3.2"
},
"devDependencies": {
"copyfiles": "^2.4.1",
"sass": "^1.69.7"
},
"scripts": {
"bs-bundle": "copyfiles -f node_modules/bootstrap/dist/js/bootstrap.bundle.min.* wwwroot/bootstrap/js",
"bs-theme": "sass --style=compressed Theme/bootstrap.scss:wwwroot/bootstrap/css/bootstrap.min.css"
}
}

app.csproj

<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>

<ItemGroup>
  <_ContentIncludedByDefault Remove="wwwroot\bootstrap\bootstrap.min.css" />
  <_ContentIncludedByDefault Remove="wwwroot\bootstrap\bootstrap.min.css.map" />
</ItemGroup>

<ItemGroup>
  <PackageReference Include="Havit.Blazor.Components.Web.Bootstrap" Version="4.4.2-pre2" />
</ItemGroup>

<Target Name="Bootstrap" BeforeTargets="BeforeBuild">
    <Exec Command="npm install"/>
    <Exec Command="npm run bs-bundle"/>
    <Exec Command="npm run bs-theme"/>
</Target>

[hakenr]

@crdo Please take a look. This might fit into the "Concepts" section of our doc, maybe a part of the (currently not existing) "Customization" page?