Åtgärda felkod 64 när du använder Node.js och NPM för att köra "npm run sass" i Blazor

Felsökning av Blazor Compile-problem med Sass och NPM

När du utvecklar en Blazor-applikation kan integration av SCSS-stilar (Sass) i ditt arbetsflöde förbättra ditt projekts designflexibilitet. Men som med många inställningar kan vissa konfigurationer leda till fel under byggprocessen. I det här fallet uppstår en felkod 64 när kommandot körs npm kör sass i ett Blazor-projekt.

Det här problemet uppstår när man försöker kompilera SCSS-filer till CSS med en anpassad ExecCommand i .csproj-filen. Även om den här installationen kan ha fungerat i äldre versioner av Blazor eller Visual Studio, kan du upptäcka att konstruktionen misslyckas på grund av förändringar i verktygen eller miljön.

I den här artikeln kommer vi att utforska hur man identifierar orsaken till felkoden 64 och ger steg för att uppdatera eller ersätta den befintliga konfigurationen för att säkerställa att dina SCSS-filer kompileras korrekt. Genom att justera ditt tillvägagångssätt kan du undvika kompileringsfel och smidigt integrera Sass i ditt Blazor-projekt.

Låt oss dyka ner i detaljerna om varför det här felet uppstår, vilken roll Node.js och NPM har i problemet och hur man implementerar en uppdaterad lösning för din Blazor-applikation med .NET 8 och Visual Studio 2022.

Förstå lösningen på felkod 64 i Blazor

Skripten som tillhandahålls i exemplen är utformade för att adressera felkoden 64 som uppstår under kompileringen av SCSS-filer i ett Blazor-projekt med Node.js och NPM. Det här felet beror vanligtvis på felaktig konfiguration i Blazor-projektfilen (.csproj) eller felaktig hantering av SCSS-kompilering. Den första lösningen eliminerar behovet av SCSS-kompilering direkt från .NET-byggprocessen genom att ladda ner den till NPM använder ett anpassat skript i package.json. Detta tillvägagångssätt förenklar kompileringen av SCSS-filer genom att använda nod-sass kommando, som kompilerar alla SCSS-filer till CSS och lagrar dem i lämplig utdatamapp.

I den andra lösningen tog vi upp syntaxproblemen i ExecCommand i .csproj-filen. Här introducerade vi användningen av npx för att säkerställa att nodmoduler installerade lokalt kan köras utan att kräva global installation. Detta hjälper till att upprätthålla projektberoenden rent. Kommandot inuti .csproj-filen modifierades också för att säkerställa korrekta filsökvägar och utdata för kompilerad SCSS. Den här lösningen är idealisk för utvecklare som vill behålla SCSS-kompileringen inom .NET-byggpipelinen men som behöver modernare syntax och kompatibilitet med uppdaterade verktyg.

Den tredje lösningen utnyttjar Webpack, som är ett mer avancerat verktyg för att kombinera och hantera tillgångar som JavaScript, CSS och SCSS i moderna webbapplikationer. Genom att integrera Webpack hanterar vi SCSS-kompileringsprocessen genom att använda specifika laddare som sass-lastare och css-loader. Dessa verktyg läggs till i Webpacks konfiguration, vilket gör att den kan bearbeta SCSS-filer effektivt. Den här metoden är särskilt användbar för storskaliga projekt som kräver avancerad front-end tillgångshantering.

Slutligen introducerades enhetstestning som ett viktigt steg för att validera SCSS-kompileringsprocessen. Använder Skoj i samband med nod-sass, kan vi automatisera tester för att säkerställa att SCSS-filerna är korrekt kompilerade till CSS utan fel. Detta fångar inte bara upp problem tidigt utan säkerställer också konsekvens i olika miljöer. Genom att sätta upp automatiserade tester kan utvecklare behålla förtroendet för att deras SCSS-kompilering fungerar som förväntat, även när projektet utvecklas eller beroenden förändras. Detta tillvägagångssätt är viktigt för att säkerställa långsiktig 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.

Utforska alternativa metoder för SCSS-kompilering i Blazor

En annan viktig aspekt att tänka på när du hanterar SCSS i Blazor-applikationer är flexibiliteten att integrera externa verktyg som Klunk eller uppgiftslöpare. Medan NPM-skript och Webpack är effektiva för att kompilera SCSS, kan Gulp ge mer detaljerad kontroll över filbevakning, optimering och felhantering. Genom att integrera Gulp i ditt Blazor-projekt kan du automatisera uppgifter som att kompilera SCSS, minifiera CSS och till och med ladda om webbläsaren live vid ändringar.

Gulp fungerar genom att skapa en pipeline som streamar filtransformationer. Du kan till exempel skriva en Gulp-uppgift som övervakar dina SCSS-filer, kompilerar dem när ändringar upptäcks och placerar de resulterande CSS-filerna i lämplig katalog. Detta kan vara särskilt användbart för större projekt med många filer som behöver ständiga uppdateringar. Dessutom erbjuder Gulp stor flexibilitet genom att du kan skriva anpassade funktioner, och den integreras väl med andra byggsystem.

Ett annat tillvägagångssätt att överväga är att använda Grymta för SCSS-kompilering. Grunt är en annan populär JavaScript-uppdragslöpare, liknande Gulp men med en annan konfigurationsstil. Grunt fungerar genom att definiera uppgifter i en Gruntfile.js, som beskriver stegen att ta vid kompilering av SCSS. Grunt kan vara ett utmärkt val om ditt projekt redan har Grunt som en del av byggprocessen eller om du letar efter ett väldokumenterat verktyg med en mängd plugins. Både Gulp och Grunt, tillsammans med Webpack, tillhandahåller moderna alternativ till att hantera SCSS-kompilering i Blazor.