Foutcode 64 repareren bij gebruik van Node.js en NPM om "npm run sass" uit te voeren in Blazor

Problemen met het compileren van Blazor oplossen met Sass en NPM

Bij het ontwikkelen van een Blazor-applicatie kan het integreren van SCSS (Sass)-stijlen in uw workflow de ontwerpflexibiliteit van uw project vergroten. Zoals bij veel opstellingen kunnen bepaalde configuraties echter tot fouten leiden tijdens het bouwproces. In dit geval treedt er een foutcode 64 op bij het uitvoeren van de opdracht npm run sass in een Blazor-project.

Dit probleem doet zich voor wanneer u SCSS-bestanden in CSS probeert te compileren met behulp van een custom ExecCommand in het .csproj-bestand. Hoewel deze opzet mogelijk heeft gewerkt in oudere versies van Blazor of Visual Studio, kan het zijn dat de build mislukt vanwege wijzigingen in de tools of de omgeving.

In dit artikel onderzoeken we hoe u de oorzaak van foutcode 64 kunt identificeren en geven we stappen om de bestaande configuratie bij te werken of te vervangen om ervoor te zorgen dat uw SCSS-bestanden correct worden gecompileerd. Door uw aanpak aan te passen, kunt u compileerfouten voorkomen en Sass soepel in uw Blazor-project integreren.

Laten we eens kijken naar de details van waarom deze fout optreedt, de rol van Node.js en NPM in het probleem, en hoe u een bijgewerkte oplossing voor uw Blazor-applicatie kunt implementeren met behulp van .NET 8 en Visual Studio 2022.

De oplossing voor foutcode 64 in Blazor begrijpen

De scripts in de voorbeelden zijn ontworpen om de foutcode 64 aan te pakken die optreedt tijdens het compileren van SCSS-bestanden in een Blazor-project met behulp van Node.js en NPM. Deze fout komt doorgaans voort uit onjuiste configuratie in het Blazor-projectbestand (.csproj) of onjuiste afhandeling van SCSS-compilatie. De eerste oplossing elimineert de noodzaak voor SCSS-compilatie rechtstreeks vanuit het .NET-bouwproces door het te offloaden naar NPM met behulp van een aangepast script in de pakket.json. Deze aanpak vereenvoudigt de compilatie van SCSS-bestanden door gebruik te maken van de knooppunt-sass commando, dat alle SCSS-bestanden naar CSS compileert en ze in de juiste uitvoermap opslaat.

In de tweede oplossing hebben we de syntaxisproblemen in de ExecCommand in het .csproj-bestand. Hier hebben we het gebruik van geïntroduceerd npx om ervoor te zorgen dat lokaal geïnstalleerde knooppuntmodules kunnen worden uitgevoerd zonder dat een globale installatie vereist is. Dit helpt de projectafhankelijkheden netjes te behouden. De opdracht in het .csproj-bestand is ook gewijzigd om te zorgen voor de juiste bestandspaden en uitvoer voor gecompileerde SCSS. Deze oplossing is ideaal voor ontwikkelaars die de SCSS-compilatie binnen de .NET-buildpijplijn willen behouden, maar een modernere syntaxis en compatibiliteit met bijgewerkte tools nodig hebben.

De derde oplossing maakt gebruik van Webpakket, een geavanceerdere tool voor het bundelen en beheren van assets zoals JavaScript, CSS en SCSS in moderne webapplicaties. Door Webpack te integreren, verzorgen we het SCSS-compilatieproces door het gebruik van specifieke laders zoals sas-lader En css-lader. Deze tools worden toegevoegd aan de configuratie van Webpack, waardoor het SCSS-bestanden efficiënt kan verwerken. Deze methode is met name handig voor grootschalige projecten waarvoor geavanceerd front-end asset management vereist is.

Ten slotte werd unit-testen geïntroduceerd als een belangrijke stap bij het valideren van het SCSS-compilatieproces. Gebruiken Grap in combinatie met knooppunt-sass, kunnen we tests automatiseren om ervoor te zorgen dat de SCSS-bestanden correct en zonder fouten naar CSS worden gecompileerd. Hierdoor worden problemen niet alleen vroegtijdig onderkend, maar wordt ook consistentie tussen verschillende omgevingen gegarandeerd. Door geautomatiseerde tests op te zetten, kunnen ontwikkelaars erop vertrouwen dat hun SCSS-compilatie werkt zoals verwacht, zelfs als het project evolueert of de afhankelijkheden veranderen. Deze aanpak is essentieel voor het garanderen van stabiliteit op de lange termijn in Blazor-applicaties.

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

Onderzoek naar alternatieve methoden voor SCSS-compilatie in Blazor

Een ander belangrijk aspect waarmee u rekening moet houden bij het omgaan met SCSS in Blazor-applicaties is de flexibiliteit van het integreren van externe tools zoals Slok of taaklopers. Hoewel NPM-scripts en Webpack effectief zijn voor het compileren van SCSS, kan Gulp meer gedetailleerde controle bieden over het bekijken van bestanden, optimalisatie en foutafhandeling. Door Gulp in uw Blazor-project op te nemen, kunt u taken automatiseren zoals het compileren van SCSS, het verkleinen van CSS en zelfs het live herladen van de browser bij wijzigingen.

Gulp werkt door een pijplijn te creëren die bestandstransformaties streamt. U kunt bijvoorbeeld een Gulp-taak schrijven die uw SCSS-bestanden in de gaten houdt, deze compileert wanneer er wijzigingen worden gedetecteerd, en de resulterende CSS-bestanden in de juiste map plaatst. Dit kan vooral handig zijn voor grotere projecten met veel bestanden die voortdurend moeten worden bijgewerkt. Bovendien biedt Gulp grote flexibiliteit doordat u aangepaste functies kunt schrijven, en het kan goed worden geïntegreerd met andere bouwsystemen.

Een andere benadering om te overwegen is het gebruik ervan Grommen voor SCSS-compilatie. Grunt is een andere populaire JavaScript-taakloper, vergelijkbaar met Gulp maar met een andere configuratiestijl. Grunt werkt door taken te definiëren in een Gruntfile.js, waarin de stappen worden beschreven die moeten worden genomen bij het compileren van SCSS. Grunt kan een goede keuze zijn als uw project al Grunt heeft als onderdeel van het bouwproces of als u op zoek bent naar een goed gedocumenteerde tool met een verscheidenheid aan plug-ins. Zowel Gulp als Grunt bieden, samen met Webpack, moderne alternatieven voor het beheer van SCSS-compilatie in Blazor.