Correction du code d'erreur 64 lors de l'utilisation de Node.js et NPM pour exécuter "npm run sass" dans Blazor

Dépannage des problèmes de compilation Blazor avec Sass et NPM

Lors du développement d'une application Blazor, l'intégration des styles SCSS (Sass) dans votre flux de travail peut améliorer la flexibilité de conception de votre projet. Cependant, comme pour de nombreuses configurations, certaines configurations peuvent entraîner des erreurs lors du processus de génération. Dans ce cas, un code d'erreur 64 se produit lors de l'exécution de la commande npm exécuter sass dans un projet Blazor.

Ce problème survient lorsque vous essayez de compiler des fichiers SCSS en CSS à l'aide d'un fichier personnalisé. CommandeExec dans le fichier .csproj. Bien que cette configuration ait pu fonctionner dans les anciennes versions de Blazor ou de Visual Studio, vous constaterez peut-être que la construction échoue en raison de modifications apportées aux outils ou à l'environnement.

Dans cet article, nous explorerons comment identifier la cause du code d'erreur 64 et fournirons les étapes à suivre pour mettre à jour ou remplacer la configuration existante afin de garantir que vos fichiers SCSS se compilent correctement. En ajustant votre approche, vous pouvez éviter les erreurs de compilation et intégrer en douceur Sass dans votre projet Blazor.

Examinons en détail pourquoi cette erreur se produit, le rôle de Node.js et NPM dans le problème et comment implémenter une solution mise à jour pour votre application Blazor à l'aide de .NET 8 et Visual Studio 2022.

Comprendre la solution au code d'erreur 64 dans Blazor

Les scripts fournis dans les exemples sont conçus pour résoudre le code d'erreur 64 qui se produit lors de la compilation de fichiers SCSS dans un projet Blazor à l'aide de Node.js et NPM. Cette erreur provient généralement d'une configuration incorrecte dans le fichier projet Blazor (.csproj) ou d'une mauvaise gestion de la compilation SCSS. La première solution élimine le besoin de compilation SCSS directement à partir du processus de construction .NET en le déchargeant vers MNP en utilisant un script personnalisé dans le package.json. Cette approche simplifie la compilation des fichiers SCSS en utilisant le nœud-sass commande, qui compile tous les fichiers SCSS en CSS et les stocke dans le dossier de sortie approprié.

Dans la deuxième solution, nous avons résolu les problèmes de syntaxe dans le CommandeExec dans le fichier .csproj. Ici, nous avons introduit l'utilisation de npx pour garantir que les modules Node installés localement peuvent être exécutés sans nécessiter une installation globale. Cela permet de maintenir proprement les dépendances du projet. La commande à l'intérieur du fichier .csproj a également été modifiée pour garantir des chemins de fichiers et des sorties appropriés pour le SCSS compilé. Cette solution est idéale pour les développeurs qui souhaitent conserver la compilation SCSS dans le pipeline de build .NET mais qui ont besoin d'une syntaxe plus moderne et d'une compatibilité avec les outils mis à jour.

La troisième solution exploite Pack Web, qui est un outil plus avancé pour regrouper et gérer des actifs tels que JavaScript, CSS et SCSS dans les applications Web modernes. En intégrant Webpack, nous gérons le processus de compilation SCSS grâce à l'utilisation de chargeurs spécifiques comme chargeur sass et chargeur CSS. Ces outils sont ajoutés à la configuration de Webpack, lui permettant de traiter efficacement les fichiers SCSS. Cette méthode est particulièrement utile pour les projets à grande échelle qui nécessitent une gestion avancée des actifs front-end.

Enfin, les tests unitaires ont été introduits comme une étape importante dans la validation du processus de compilation SCSS. En utilisant Plaisanter en collaboration avec nœud-sass, nous pouvons automatiser les tests pour garantir que les fichiers SCSS sont correctement compilés en CSS sans erreurs. Cela permet non seulement de détecter rapidement les problèmes, mais garantit également la cohérence entre les différents environnements. En mettant en place des tests automatisés, les développeurs peuvent garantir que leur compilation SCSS fonctionne comme prévu, même si le projet évolue ou si les dépendances changent. Cette approche est essentielle pour garantir la stabilité à long terme des applications Blazor.

// Solution 1: Using Node.js to handle SCSS compilation externally
// This solution avoids using .csproj file for SCSS compilation
// by creating a dedicated npm script to compile all SCSS files.

// 1. Modify the package.json file to include a custom NPM script:
{
  "scripts": {
    "sass": "node-sass -w Features//*.scss -o wwwroot/css/"
  }
}

// 2. Run the following command to watch and compile SCSS files into CSS:
npm run sass

// This solution removes the need for ExecCommand in the .csproj file
// and uses NPM to manage the compilation process directly.

// Benefits: Decouples frontend and backend tasks, simplifies debugging.

// Solution 2: Correcting the ExecCommand Syntax in .csproj
// Make sure the command is properly formatted for SCSS compilation.

<Target Name="CompileScopedScss" BeforeTargets="Compile">
  <ItemGroup>
    <ScopedScssFiles Include="Features//*.razor.scss" />
  </ItemGroup>
  <Exec Command="npx node-sass -- %(ScopedScssFiles.Identity) wwwroot/css/%(Filename).css" />
</Target>

// Explanation:
// - Replaces npm with npx for compatibility with local installations.
// - Ensures proper output directory and file naming for the generated CSS.

// Benefits: Retains SCSS integration within the .NET build process while improving compatibility.

// Solution 3: Integrating Webpack for SCSS Compilation
// 1. Install the required dependencies:
npm install webpack webpack-cli sass-loader node-sass css-loader --save-dev

// 2. Create a webpack.config.js file with the following content:
module.exports = {
  entry: './Features/main.js',
  output: {
    path: __dirname + '/wwwroot/css',
    filename: 'main.css'
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }]
  }
};

// 3. Run Webpack to compile SCSS files into CSS:
npx webpack

// Benefits: Webpack provides better asset management and optimization capabilities.

// Solution 4: Unit Testing with Jest for SCSS Compilation
// 1. Install Jest and necessary modules:
npm install jest node-sass --save-dev

// 2. Create a test file named sass.test.js:
const sass = require('node-sass');

test('SCSS compilation test', () => {
  const result = sass.renderSync({
    file: 'Features/test.scss',
  });
  expect(result.css).toBeTruthy();
});

// 3. Run the test to verify SCSS compilation:
npm test

// Benefits: Provides automated checks for SCSS compilation process, ensuring consistency.

Explorer des méthodes alternatives pour la compilation SCSS dans Blazor

Un autre aspect important à prendre en compte lors de la gestion de SCSS dans les applications Blazor est la flexibilité d'intégration d'outils externes tels que Gorgée ou des coureurs de tâches. Bien que les scripts NPM et Webpack soient efficaces pour compiler SCSS, Gulp peut fournir un contrôle plus granulaire sur la surveillance, l'optimisation et la gestion des erreurs des fichiers. En incorporant Gulp dans votre projet Blazor, vous pouvez automatiser des tâches telles que la compilation de SCSS, la réduction du CSS et même le rechargement en direct du navigateur en cas de modifications.

Gulp fonctionne en créant un pipeline qui diffuse les transformations de fichiers. Par exemple, vous pouvez écrire une tâche Gulp qui surveille vos fichiers SCSS, les compile lorsque des modifications sont détectées et place les fichiers CSS résultants dans le répertoire approprié. Cela peut être particulièrement utile pour les projets plus volumineux comportant de nombreux fichiers nécessitant des mises à jour constantes. De plus, Gulp offre une grande flexibilité en vous permettant d'écrire des fonctions personnalisées et s'intègre bien avec d'autres systèmes de build.

Une autre approche à considérer consiste à utiliser Grognement pour la compilation SCSS. Grunt est un autre exécuteur de tâches JavaScript populaire, similaire à Gulp mais avec un style de configuration différent. Grunt fonctionne en définissant des tâches dans un Gruntfile.js, qui décrit les étapes à suivre lors de la compilation de SCSS. Grunt peut être un excellent choix si votre projet intègre déjà Grunt dans son processus de construction ou si vous recherchez un outil bien documenté avec une variété de plugins. Gulp et Grunt, ainsi que Webpack, proposent des alternatives modernes à la gestion de la compilation SCSS dans Blazor.