Ret fejlkode 64 ved brug af Node.js og NPM til at køre "npm run sass" i Blazor

Fejlfinding af Blazor Compile-problemer med Sass og NPM

Når du udvikler en Blazor-applikation, kan integration af SCSS (Sass)-stile i din arbejdsgang forbedre dit projekts designfleksibilitet. Men som med mange opsætninger kan visse konfigurationer føre til fejl under byggeprocessen. I dette tilfælde opstår en fejlkode 64, når kommandoen køres npm køre sass i et Blazor-projekt.

Dette problem opstår, når du forsøger at kompilere SCSS-filer til CSS ved hjælp af en brugerdefineret ExecCommand i .csproj-filen. Selvom denne opsætning kan have fungeret i ældre versioner af Blazor eller Visual Studio, kan du opleve, at bygningen mislykkes på grund af ændringer i værktøjerne eller miljøet.

I denne artikel vil vi undersøge, hvordan man identificerer årsagen til fejlkoden 64 og giver trin til at opdatere eller erstatte den eksisterende konfiguration for at sikre, at dine SCSS-filer kompileres korrekt. Ved at justere din tilgang kan du undgå kompileringsfejl og problemfrit integrere Sass i dit Blazor-projekt.

Lad os dykke ned i detaljerne om, hvorfor denne fejl opstår, hvilken rolle Node.js og NPM spiller i problemet, og hvordan du implementerer en opdateret løsning til din Blazor-applikation ved hjælp af .NET 8 og Visual Studio 2022.

Forstå løsningen på fejlkode 64 i Blazor

Scripts i eksemplerne er designet til at adressere fejlkoden 64, der opstår under kompileringen af ​​SCSS-filer i et Blazor-projekt ved hjælp af Node.js og NPM. Denne fejl stammer generelt fra forkert konfiguration i Blazor-projektfilen (.csproj) eller forkert håndtering af SCSS-kompilering. Den første løsning eliminerer behovet for SCSS-kompilering direkte fra .NET build-processen ved at overføre den til NPM ved hjælp af et brugerdefineret script i package.json. Denne tilgang forenkler kompileringen af ​​SCSS-filer ved at bruge node-sass kommando, som kompilerer alle SCSS-filer til CSS og gemmer dem i den relevante outputmappe.

I den anden løsning behandlede vi syntaksproblemerne i ExecCommand i .csproj-filen. Her introducerede vi brugen af npx for at sikre, at Node-moduler installeret lokalt kan udføres uden at kræve global installation. Dette hjælper med at opretholde projektafhængigheder rent. Kommandoen inde i .csproj-filen blev også ændret for at sikre korrekte filstier og output for kompileret SCSS. Denne løsning er ideel til udviklere, der ønsker at vedligeholde SCSS-kompileringen inden for .NET build-pipelinen, men har brug for mere moderne syntaks og kompatibilitet med opdaterede værktøjer.

Den tredje løsning udnytter Webpack, som er et mere avanceret værktøj til bundling og styring af aktiver som JavaScript, CSS og SCSS i moderne webapplikationer. Ved at integrere Webpack håndterer vi SCSS kompileringsprocessen gennem brug af specifikke loadere som f sass-loader og css-loader. Disse værktøjer føjes til Webpacks konfiguration, så den kan behandle SCSS-filer effektivt. Denne metode er især nyttig til storskalaprojekter, der kræver avanceret front-end asset management.

Endelig blev enhedstestning introduceret som et vigtigt skridt i valideringen af ​​SCSS-kompileringsprocessen. Bruger Spøg i forbindelse med node-sass, kan vi automatisere tests for at sikre, at SCSS-filerne er korrekt kompileret til CSS uden fejl. Dette fanger ikke kun problemer tidligt, men sikrer også sammenhæng på tværs af forskellige miljøer. Ved at opsætte automatiserede tests kan udviklere bevare tilliden til, at deres SCSS-kompilering fungerer som forventet, selvom projektet udvikler sig, eller afhængigheder ændres. Denne tilgang er afgørende for at sikre langsigtet stabilitet i Blazor-applikationer.

// 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.

Udforskning af alternative metoder til SCSS-kompilering i Blazor

Et andet vigtigt aspekt at overveje, når du håndterer SCSS i Blazor-applikationer, er fleksibiliteten ved at integrere eksterne værktøjer som f.eks. Gulp eller opgaveløbere. Mens NPM-scripts og Webpack er effektive til kompilering af SCSS, kan Gulp give mere detaljeret kontrol over filovervågning, optimering og fejlhåndtering. Ved at inkorporere Gulp i dit Blazor-projekt kan du automatisere opgaver som at kompilere SCSS, minificere CSS og endda live-genindlæse browseren ved ændringer.

Gulp fungerer ved at skabe en pipeline, der streamer filtransformationer. For eksempel kan du skrive en Gulp-opgave, der overvåger dine SCSS-filer, kompilerer dem, når der registreres ændringer, og placerer de resulterende CSS-filer i den relevante mappe. Dette kan især være nyttigt til større projekter med mange filer, der har brug for konstante opdateringer. Derudover tilbyder Gulp stor fleksibilitet ved at give dig mulighed for at skrive brugerdefinerede funktioner, og det integreres godt med andre byggesystemer.

En anden tilgang at overveje er at bruge Grynte til SCSS-kompilering. Grunt er en anden populær JavaScript-opgaveløber, der ligner Gulp, men med en anden konfigurationsstil. Grunt fungerer ved at definere opgaver i en Gruntfile.js, som skitserer de trin, du skal tage, når du kompilerer SCSS. Grunt kan være et godt valg, hvis dit projekt allerede har Grunt som en del af byggeprocessen, eller hvis du leder efter et veldokumenteret værktøj med en række plugins. Både Gulp og Grunt giver sammen med Webpack moderne alternativer til at administrere SCSS-kompilering i Blazor.