Retting av feilkode 64 når du bruker Node.js og NPM til å kjøre "npm run sass" i Blazor

Feilsøking av Blazor Compile-problemer med Sass og NPM

Når du utvikler en Blazor-applikasjon, kan integrering av SCSS-stiler (Sass) i arbeidsflyten forbedre prosjektets designfleksibilitet. Men som med mange oppsett, kan visse konfigurasjoner føre til feil under byggeprosessen. I dette tilfellet oppstår en feilkode 64 når du kjører kommandoen npm kjøre sass i et Blazor-prosjekt.

Dette problemet oppstår når du prøver å kompilere SCSS-filer til CSS ved hjelp av en tilpasset ExecCommand i .csproj-filen. Selv om dette oppsettet kan ha fungert i eldre versjoner av Blazor eller Visual Studio, kan du oppleve at byggingen mislykkes på grunn av endringer i verktøyene eller miljøet.

I denne artikkelen vil vi utforske hvordan du identifiserer årsaken til feilkoden 64 og gir trinn for å oppdatere eller erstatte den eksisterende konfigurasjonen for å sikre at SCSS-filene kompileres riktig. Ved å justere tilnærmingen din kan du unngå kompileringsfeil og enkelt integrere Sass i Blazor-prosjektet ditt.

La oss dykke ned i detaljene om hvorfor denne feilen oppstår, rollen til Node.js og NPM i problemet, og hvordan du implementerer en oppdatert løsning for Blazor-applikasjonen din ved å bruke .NET 8 og Visual Studio 2022.

Forstå løsningen på feilkode 64 i Blazor

Skriptene i eksemplene er utformet for å adressere feilkoden 64 som oppstår under kompileringen av SCSS-filer i et Blazor-prosjekt som bruker Node.js og NPM. Denne feilen kommer vanligvis fra feil konfigurasjon i Blazor-prosjektfilen (.csproj) eller feil håndtering av SCSS-kompilering. Den første løsningen eliminerer behovet for SCSS-kompilering direkte fra .NET byggeprosessen ved å avlaste den til NPM ved å bruke et tilpasset skript i package.json. Denne tilnærmingen forenkler kompileringen av SCSS-filer ved å bruke node-sass kommando, som kompilerer alle SCSS-filer til CSS og lagrer dem i den aktuelle utdatamappen.

I den andre løsningen tok vi for oss syntaksproblemene i ExecCommand i .csproj-filen. Her introduserte vi bruken av npx for å sikre at nodemoduler som er installert lokalt kan kjøres uten å kreve global installasjon. Dette bidrar til å opprettholde prosjektavhengigheter rent. Kommandoen inne i .csproj-filen ble også endret for å sikre riktige filbaner og utdata for kompilert SCSS. Denne løsningen er ideell for utviklere som ønsker å vedlikeholde SCSS-kompileringen innenfor .NET byggepipeline, men som trenger mer moderne syntaks og kompatibilitet med oppdaterte verktøy.

Den tredje løsningen utnytter Webpack, som er et mer avansert verktøy for bunting og administrasjon av eiendeler som JavaScript, CSS og SCSS i moderne nettapplikasjoner. Ved å integrere Webpack håndterer vi SCSS-kompileringsprosessen gjennom bruk av spesifikke lastere som sass-loader og css-loader. Disse verktøyene legges til Webpacks konfigurasjon, slik at den kan behandle SCSS-filer effektivt. Denne metoden er spesielt nyttig for storskalaprosjekter som krever avansert front-end-aktivastyring.

Til slutt ble enhetstesting introdusert som et viktig skritt i valideringen av SCSS-kompileringsprosessen. Bruker Spøk i forbindelse med node-sass, kan vi automatisere tester for å sikre at SCSS-filene er riktig kompilert til CSS uten feil. Dette fanger ikke bare opp problemer tidlig, men sikrer også konsistens på tvers av ulike miljøer. Ved å sette opp automatiserte tester kan utviklere opprettholde tilliten til at SCSS-kompileringen deres fungerer som forventet, selv når prosjektet utvikler seg eller avhengighetene endres. Denne tilnærmingen er avgjørende for å sikre langsiktig stabilitet i Blazor-applikasjoner.

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

Utforsker alternative metoder for SCSS-kompilering i Blazor

Et annet viktig aspekt å vurdere når du håndterer SCSS i Blazor-applikasjoner, er fleksibiliteten ved å integrere eksterne verktøy som Gulp eller oppgaveløpere. Mens NPM-skript og Webpack er effektive for å kompilere SCSS, kan Gulp gi mer detaljert kontroll over filovervåking, optimalisering og feilhåndtering. Ved å inkludere Gulp i Blazor-prosjektet ditt, kan du automatisere oppgaver som å kompilere SCSS, forminske CSS og til og med laste ned nettleseren på nytt ved endringer.

Gulp fungerer ved å lage en pipeline som strømmer filtransformasjoner. Du kan for eksempel skrive en Gulp-oppgave som overvåker SCSS-filene dine, kompilerer dem når endringer oppdages, og plasserer de resulterende CSS-filene i riktig katalog. Dette kan være spesielt nyttig for større prosjekter med mange filer som trenger konstante oppdateringer. Dessuten tilbyr Gulp stor fleksibilitet ved å la deg skrive tilpassede funksjoner, og den integreres godt med andre byggesystemer.

En annen tilnærming å vurdere er å bruke Grynte for SCSS-kompilering. Grunt er en annen populær JavaScript-oppgaveløper, lik Gulp, men med en annen konfigurasjonsstil. Grunt fungerer ved å definere oppgaver i en Gruntfile.js, som skisserer trinnene du må ta når du kompilerer SCSS. Grunt kan være et godt valg hvis prosjektet ditt allerede har Grunt som en del av byggeprosessen, eller hvis du leter etter et godt dokumentert verktøy med en rekke plugins. Både Gulp og Grunt, sammen med Webpack, gir moderne alternativer til å administrere SCSS-kompilering i Blazor.