Klaidos kodo 64 taisymas naudojant Node.js ir NPM paleisti „npm run sass“ programoje „Blazor“

„Blazor“ kompiliavimo problemų, susijusių su Sass ir NPM, šalinimas

Kuriant Blazor taikomąją programą, SCSS (Sass) stilių integravimas į darbo eigą gali padidinti projekto dizaino lankstumą. Tačiau, kaip ir daugelyje sąrankų, tam tikros konfigūracijos gali sukelti klaidų kūrimo proceso metu. Tokiu atveju vykdant komandą atsiranda klaidos kodas 64 npm paleisti sass Blazor projekte.

Ši problema kyla bandant kompiliuoti SCSS failus į CSS naudojant pasirinktinį ExecCommand .csproj faile. Nors ši sąranka galėjo veikti senesnėse „Blazor“ arba „Visual Studio“ versijose, galite pastebėti, kad kūrimas nepavyks dėl įrankių ar aplinkos pakeitimų.

Šiame straipsnyje išnagrinėsime, kaip nustatyti klaidos kodo 64 priežastį, ir pateiksime veiksmus, kaip atnaujinti arba pakeisti esamą konfigūraciją, kad SCSS failai būtų tinkamai kompiliuojami. Pakoreguodami savo požiūrį galite išvengti kompiliavimo klaidų ir sklandžiai integruoti Sass į savo Blazor projektą.

Pažvelkime į šios klaidos ypatumus, Node.js ir NPM vaidmenį sprendžiant problemą ir kaip įdiegti atnaujintą sprendimą jūsų Blazor programai naudojant .NET 8 ir Visual Studio 2022.

„Blazor“ klaidos kodo 64 sprendimo supratimas

Pavyzdžiuose pateikti scenarijai skirti pašalinti klaidos kodą 64, kuris atsiranda kompiliuojant SCSS failus Blazor projekte naudojant Node.js ir NPM. Ši klaida paprastai kyla dėl neteisingos konfigūracijos Blazor projekto faile (.csproj) arba netinkamo SCSS kompiliavimo tvarkymo. Pirmasis sprendimas pašalina SCSS kompiliavimo poreikį tiesiai iš .NET kūrimo proceso, perkeliant jį į NPM naudojant pasirinktinį scenarijų package.json. Šis metodas supaprastina SCSS failų kompiliavimą naudojant mazgas-sass komanda, kuri sukompiliuoja visus SCSS failus į CSS ir išsaugo juos atitinkamame išvesties aplanke.

Antrajame sprendime sprendėme sintaksės problemas ExecCommand .csproj faile. Čia mes pristatėme naudojimą npx užtikrinti, kad vietoje įdiegtų mazgų modulių būtų galima vykdyti nereikalaujant visuotinio diegimo. Tai padeda švariai išlaikyti projekto priklausomybes. Komanda .csproj faile taip pat buvo pakeista, kad būtų užtikrintas tinkamas sukompiliuoto SCSS failo kelias ir išvestis. Šis sprendimas idealiai tinka kūrėjams, kurie nori išlaikyti SCSS kompiliaciją .NET kūrimo dujotiekyje, tačiau jiems reikia modernesnės sintaksės ir suderinamumo su atnaujintais įrankiais.

Trečiasis sprendimas yra svertas Webpack, kuris yra pažangesnis įrankis, skirtas sugrupuoti ir valdyti išteklius, pvz., „JavaScript“, CSS ir SCSS šiuolaikinėse žiniatinklio programose. Integruodami Webpack, mes tvarkome SCSS kompiliavimo procesą naudodami specialius įkroviklius, pvz., sass-loader ir css-loader. Šie įrankiai pridedami prie „Webpack“ konfigūracijos, leidžiant efektyviai apdoroti SCSS failus. Šis metodas ypač naudingas didelės apimties projektams, kuriems reikalingas pažangus priekinio turto valdymas.

Galiausiai, vienetų testavimas buvo įvestas kaip svarbus žingsnis patvirtinant SCSS kompiliavimo procesą. Naudojant Juokas kartu su mazgas-sass, galime automatizuoti testus, siekdami užtikrinti, kad SCSS failai būtų tinkamai sukompiliuoti į CSS ir be klaidų. Tai ne tik anksti nustato problemas, bet ir užtikrina nuoseklumą įvairiose aplinkose. Nustatydami automatizuotus testus, kūrėjai gali išlaikyti pasitikėjimą, kad jų SCSS kompiliacija veikia taip, kaip tikėtasi, net kai projektas vystosi arba keičiasi priklausomybės. Šis metodas yra būtinas norint užtikrinti ilgalaikį Blazor programų stabilumą.

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

Alternatyvių SCSS kompiliavimo metodų tyrinėjimas naudojant „Blazor“.

Kitas svarbus aspektas, į kurį reikia atsižvelgti tvarkant SCSS Blazor programose, yra lankstumas integruoti išorinius įrankius, pvz. Gulp arba užduočių vykdytojai. Nors NPM scenarijai ir „Webpack“ yra veiksmingi SCSS kompiliavimui, „Gulp“ gali užtikrinti išsamesnę failų stebėjimo, optimizavimo ir klaidų tvarkymo kontrolę. Įtraukę Gulp į savo Blazor projektą, galite automatizuoti tokias užduotis kaip SCSS kompiliavimas, CSS sumažinimas ir net tiesioginis naršyklės įkėlimas pakeitus.

„Gulp“ veikia kurdamas konvejerį, kuris perduoda failų transformacijas. Pavyzdžiui, galite parašyti Gulp užduotį, kuri stebi jūsų SCSS failus, sukompiliuoja juos, kai aptinkami pakeitimai, ir įdeda gautus CSS failus į atitinkamą katalogą. Tai gali būti ypač naudinga didesniems projektams, kuriuose yra daug failų, kuriuos reikia nuolat atnaujinti. Be to, „Gulp“ siūlo didelį lankstumą, nes leidžia rašyti pasirinktines funkcijas, ir ji puikiai integruojasi su kitomis kūrimo sistemomis.

Kitas būdas, kurį reikia apsvarstyti, yra naudojimas Grunt SCSS kompiliavimui. „Grunt“ yra dar vienas populiarus „JavaScript“ užduočių vykdytojas, panašus į „Gulp“, bet turintis skirtingą konfigūracijos stilių. Grunt veikia apibrėždamas užduotis a Gruntfile.js, kuriame aprašomi veiksmai, kurių reikia imtis kuriant SCSS. Grunt gali būti puikus pasirinkimas, jei jūsų projekte jau yra Grunt kaip kūrimo proceso dalis arba jei ieškote gerai dokumentuoto įrankio su įvairiais papildiniais. Tiek „Gulp“, tiek „Grunt“ kartu su „Webpack“ siūlo modernias SCSS kompiliacijos tvarkymo „Blazor“ alternatyvas.