Correcció del codi d'error 64 quan s'utilitza Node.js i NPM per executar "npm run sass" a Blazor

Resolució de problemes de compilació de Blazor amb Sass i NPM

Quan desenvolupeu una aplicació Blazor, la integració d'estils SCSS (Sass) al vostre flux de treball pot millorar la flexibilitat de disseny del vostre projecte. Tanmateix, com passa amb moltes configuracions, determinades configuracions poden provocar errors durant el procés de creació. En aquest cas, es produeix un codi d'error 64 en executar l'ordre npm run sass en un projecte Blazor.

Aquest problema sorgeix quan s'intenta compilar fitxers SCSS a CSS mitjançant un personalitzat ExecCommand al fitxer .csproj. Tot i que aquesta configuració pot haver funcionat en versions anteriors de Blazor o Visual Studio, és possible que trobeu que la compilació falla a causa dels canvis en les eines o l'entorn.

En aquest article, explorarem com identificar la causa del codi d'error 64 i proporcionarem passos per actualitzar o substituir la configuració existent per garantir que els vostres fitxers SCSS es compilin correctament. En ajustar el vostre enfocament, podeu evitar errors de compilació i integrar Sass sense problemes al vostre projecte Blazor.

Aprofundim en els detalls de per què es produeix aquest error, el paper de Node.js i NPM en el problema i com implementar una solució actualitzada per a la vostra aplicació Blazor mitjançant .NET 8 i Visual Studio 2022.

Comprendre la solució al codi d'error 64 a Blazor

Els scripts que es proporcionen als exemples estan dissenyats per abordar el codi d'error 64 que es produeix durant la compilació de fitxers SCSS en un projecte Blazor mitjançant Node.js i NPM. Aquest error generalment prové d'una configuració incorrecta al fitxer de projecte Blazor (.csproj) o d'una manipulació inadequada de la compilació SCSS. La primera solució elimina la necessitat de compilar SCSS directament des del procés de creació de .NET descarregant-lo NPM utilitzant un script personalitzat al fitxer package.json. Aquest enfocament simplifica la compilació de fitxers SCSS mitjançant l'ús node-sass comanda, que compila tots els fitxers SCSS a CSS i els emmagatzema a la carpeta de sortida adequada.

A la segona solució, vam abordar els problemes de sintaxi al fitxer ExecCommand dins del fitxer .csproj. Aquí, vam introduir l'ús de npx per garantir que els mòduls Node instal·lats localment es puguin executar sense necessitat d'instal·lació global. Això ajuda a mantenir netes les dependències del projecte. L'ordre dins del fitxer .csproj també es va modificar per garantir els camins i sortides dels fitxers adequats per a SCSS compilat. Aquesta solució és ideal per als desenvolupadors que volen mantenir la compilació SCSS dins del pipeline de compilació .NET però necessiten una sintaxi més moderna i una compatibilitat amb eines actualitzades.

La tercera solució aprofita Paquet web, que és una eina més avançada per agrupar i gestionar actius com JavaScript, CSS i SCSS en aplicacions web modernes. En integrar Webpack, gestionem el procés de compilació SCSS mitjançant l'ús de carregadors específics com carregador sass i css-loader. Aquestes eines s'afegeixen a la configuració de Webpack, cosa que li permet processar fitxers SCSS de manera eficient. Aquest mètode és especialment útil per a projectes a gran escala que requereixen una gestió avançada d'actius de front-end.

Finalment, es va introduir la prova d'unitat com un pas important per validar el procés de compilació SCSS. Utilitzant Broma conjuntament amb node-sass, podem automatitzar les proves per garantir que els fitxers SCSS es compilin correctament a CSS sense errors. Això no només detecta els problemes aviat, sinó que també garanteix la coherència entre diferents entorns. Mitjançant la configuració de proves automatitzades, els desenvolupadors poden mantenir la confiança que la seva compilació SCSS funciona com s'esperava, fins i tot quan el projecte evoluciona o canvien les dependències. Aquest enfocament és essencial per garantir l'estabilitat a llarg termini de les aplicacions 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.

Explorant mètodes alternatius per a la compilació SCSS a Blazor

Un altre aspecte important a tenir en compte a l'hora de manejar SCSS a les aplicacions Blazor és la flexibilitat d'integrar eines externes com Gup o corredors de tasques. Tot i que els scripts NPM i Webpack són efectius per compilar SCSS, Gulp pot proporcionar un control més granular sobre la visualització, l'optimització i la gestió d'errors de fitxers. Si incorporeu Gulp al vostre projecte Blazor, podeu automatitzar tasques com la compilació de SCSS, la minimització de CSS i, fins i tot, la recàrrega en directe del navegador en cas de canvis.

Gulp funciona creant una canalització que transmet transformacions de fitxers. Per exemple, podeu escriure una tasca Gulp que vigila els vostres fitxers SCSS, els compila quan es detecten canvis i col·loqui els fitxers CSS resultants al directori adequat. Això pot ser especialment útil per a projectes més grans amb molts fitxers que necessiten actualitzacions constants. A més, Gulp ofereix una gran flexibilitat ja que us permet escriure funcions personalitzades i s'integra bé amb altres sistemes de compilació.

Un altre enfocament a considerar és utilitzar Grunyit per a la compilació SCSS. Grunt és un altre programa de tasques de JavaScript popular, similar a Gulp però amb un estil de configuració diferent. Grunt funciona definint tasques en a Gruntfile.js, que descriu els passos a seguir en compilar SCSS. Grunt pot ser una opció fantàstica si el vostre projecte ja té Grunt com a part del seu procés de creació o si busqueu una eina ben documentada amb una varietat de connectors. Tant Gulp com Grunt, juntament amb Webpack, proporcionen alternatives modernes per gestionar la compilació SCSS a Blazor.