Comment gérer les fichiers SASS/CSS avec un site ASP.NET/Blazor ?

En fait, je me suis posé la question tout bêtement pour la plateforme 🤔

Vu que j'ai des fichiers SASS, et qu'il faut les "compiler" pour les transformer en CSS, sans compter le post-traitement CSS (bundle, minification), comment faire efficacement ? Voici ce que j'ai trouvé !

Utiliser les extensions Visual Studio 2022

Visual Studio est un IDE fantastique, mais il lui manque parfois certaines choses. La gestion des fichiers CSS en fait partie. Heureusement, l'IDE est par nature extensible. D'ailleurs on peut aller voir le marketplace qui est bien fourni. Donc, c'est ce que j'ai fait, et j'ai trouvé l'extension suivante : https://marketplace.visualstudio.com/items?itemName=Failwyn.BundlerMinifier64

L'outil fonctionne globalement bien, mais ne m'a pas satisfait, car :

• Il faut modifier la configuration pour gérer une multitude de fichiers SASS, et je ne trouve pas la documentation très claire sur le "comment faire", surtout lorsqu'on veut un fichier unique de destination
• Il faut que l'extension soit installée par tous les développeurs de l'équipe pour avoir la même fonctionnalité 😕
• Ce n'est pas intégrable dans un pipeline devops 😱

Du coup, j'ai simplement désinstallé l'extension et je suis parti explorer une autre voie ...

Utiliser Gulp

Pour ceux qui ne connaissent pas, Gulp est un outil de gestion des tâches intégrables avec Visual Studio 2022 (grâce à l'explorateur de tâches). Avec Gulp, on installe des plugins et on code un fichier JavaScript de script d'automatisation. C'était ma solution préférée car :

• Il existe un grand nombre de plugins permettant d'atteindre mon objectif
• C'est intégrable dans un pipeline devops
• Le fichier de configuration est dans le code source, ce qui veut dire que n'importe quel développeur peut rapidement mettre cela en place sur son poste

Cela marchait très bien jusqu'à ... ce que gulp n'évolue plus 😰 (ou alors j'ai raté une info). Du coup, avec les dernières versions de NodeJS, je me retrouve à ne plus pouvoir exécuter mon script (je devais forcer la version 10 sur mes pipelines, mais localement, avec Windows 11, NodeJS 10.x ne marche plus). Suite à ce contrecoup (car Gulp m'a servi pendant un long moment), j'ai dû trouver une alternative ...

Utiliser un dotnet tool

Il ne faut pas se voiler la face, .NET Core a été sorti pour concurrencer principalement NodeJS. Donc il est logique que l'écosystème .NET soit enrichi pour retrouver la même expérience développeur que NodeJS. C'est comme ça que sont nés les dotnet tools (un package qui peut s'installer localement ou globalement et servir d'outil).

Vu que Gulp ne marchait plus, j'ai cherché une solution sans forcément penser au dotnet tools. Et du coup, j'ai trouvé un excellent outil : webcompiler.

Marche à suivre

Tout d'abord, on installe l'outil sur le système (de préférence dans un terminal lancé en admin) :

dotnet tool install Excubo.WebCompiler --global

Ensuite, on peut utiliser la commande 'webcompiler' directement dans le terminal afin de pouvoir compiler les fichiers. L'outil dispose de beaucoup d'options (voir la documentation).

Pour automatiser la compilation/minification des fichiers, on modifie le csproj :

    <Target Name="CompileStaticAssets" AfterTargets="AfterBuild">
        <Exec Command="webcompiler -r dossier -o destination -z disabled" StandardOutputImportance="high" />
    </Target>

Ici, en définissant l'attribut "AfterTargets", je précise que je veux que l'outil se lance une fois la build terminée (on a d'autres target au besoin).

Cerise sur le gâteau, sur Azure DevOps, c'est ultra simpliste :

Sans plus ! Eh oui, le csproj prend déjà en compte l'exécution de l'outil après la build !

Merci les dotnet tool 😍