Transpiling SASS to different production environments on Azure WebApps

Question

I have a scenario, where I have single development instance, single staging instance and multiple production environments, each running it's own Azure WebApp and database. Each "tenant" is branded differently, so the color-schema is stored in the database.

The application runs on .NET 8, frontend is bootstrap 5

I cannot use transpilation on compiling, since there is only one build process, which is then deployed to multiple instances (via azure dev ops).

Idea 1: My old approach was to start a a powershell process on application startup and install node-sass + manually perform node-sass action via powershell:

ProcessStartInfo installInfo = new ProcessStartInfo();
installInfo.FileName = "powershell.exe";
installInfo.Arguments = "cd " + Directory.GetCurrentDirectory().Replace(" ", "` ") + ";npm install -g node-sass";
...

startInfo2.FileName = "powershell.exe";
startInfo2.Arguments = "cd " + Directory.GetCurrentDirectory().Replace(" ", "` ") + ";node-sass ABC.scss ABC.css --style compressed";

Which seemdes to work fine for a while, but for a few month now I am getting no result. Installing node-sass on Azure WebApp does not work (every time), since the npm version is not up to date.

npm notice New major version of npm available! 9.7.2 -> 10.2.5

I cannot entirely reproduce this, because on some instances it is working fine. In the configurations there are no differences, so I don't get why it is not behaving equal.

I use the highest available WEBSITE_NODE_DEFAULT_VERSION (20.4.0), but Azure does not seem to allow newer node versions yet. Therefore on most machines the tranpilation does not work, since node-sass is not installed and cannot be.

Idea 2: My CI/CD pipeline is running on Azure DevOps, maybe I can perform a sass transformation while releasing? enter image description here I tried implementing the Colepile Sass Addin, but could not bring it to work.:enter image description here

Answer 1

Approach 1:-

Instead of adding the sass command in the powershell script, Directly build your Web app with Sass and then Publish the built artifact in the Web app.

My Azure DevOps yaml code:-

trigger:
  branches:
    include:
      - main
      - development

pool:
  vmImage: 'windows-latest'

steps:
- task: UseDotNet@2
  inputs:
    packageType: 'sdk'
    version: '8.x'

- script: |
    npm install -g npm@latest
    npm install node-sass # Install node-sass locally
    cd $(System.DefaultWorkingDirectory)/wwwroot/css/Sass
    node-sass style.scss ../style.css --output-style compressed
  displayName: 'Install Node.js dependencies'

- task: DotNetCoreCLI@2
  displayName: 'Build .NET Solution'
  inputs:
    command: 'build'
    projects: '**/*.csproj'
    arguments: '--configuration Release'

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: drop'
  inputs:
    PathtoPublish: '$(System.DefaultWorkingDirectory)'
    ArtifactName: 'drop'

Output:-

And then Refer my SO answer here to deploy the Web app into Azure

Approach 2:-

Directly build the Sass files with your Web app locally and directly push the build folder in Azure Repos, Then use the Release pipeline with your build artifact to deploy to Web app.