Исправљање кода грешке 64 када користите Ноде.јс и НПМ за покретање „нпм рун сасс“ у Блазору

Решавање проблема Блазор компајлирања са Сасс-ом и НПМ-ом

Када развијате Блазор апликацију, интегрисање СЦСС (Сасс) стилова у ваш радни ток може побољшати флексибилност дизајна вашег пројекта. Међутим, као и код многих подешавања, одређене конфигурације могу довести до грешака током процеса изградње. У овом случају се јавља код грешке 64 приликом покретања команде нпм рун сасс у пројекту Блазор.

Овај проблем се јавља када покушавате да преведете СЦСС датотеке у ЦСС користећи прилагођено ЕкецЦомманд у .цспрој датотеци. Иако је ово подешавање можда функционисало у старијим верзијама Блазора или Висуал Студио-а, можда ћете открити да изградња не успе због промена у алатима или окружењу.

У овом чланку ћемо истражити како да идентификујемо узрок кода грешке 64 и пружимо кораке за ажурирање или замену постојеће конфигурације како бисмо осигурали да се СЦСС датотеке правилно компајлирају. Прилагођавањем свог приступа можете избећи грешке при компајлирању и глатко интегрисати Сасс у ваш Блазор пројекат.

Хајде да заронимо у специфичности зашто се ова грешка појављује, улогу Ноде.јс и НПМ-а у проблему и како да имплементирате ажурирано решење за вашу Блазор апликацију користећи .НЕТ 8 и Висуал Студио 2022.

Разумевање решења кода грешке 64 у Блазору

Скрипте наведене у примерима су дизајниране да адресирају код грешке 64 који се јавља током компилације СЦСС датотека у Блазор пројекту користећи Ноде.јс и НПМ. Ова грешка углавном потиче од нетачне конфигурације у датотеци пројекта Блазор (.цспрој) или неправилног руковања СЦСС компилацијом. Прво решење елиминише потребу за СЦСС компилацијом директно из .НЕТ процеса прављења тако што га пребацује на НПМ користећи прилагођену скрипту у пацкаге.јсон. Овај приступ поједностављује компилацију СЦСС датотека коришћењем чвор-сасс команду, која компајлира све СЦСС датотеке у ЦСС и складишти их у одговарајућу излазну фасциклу.

У другом решењу бавили смо се проблемима синтаксе у ЕкецЦомманд унутар .цспрој датотеке. Овде смо увели употребу нпк како би се осигурало да се модули Ноде инсталирани локално могу извршити без потребе за глобалном инсталацијом. Ово помаже у чистом одржавању зависности пројекта. Команда унутар .цспрој датотеке је такође модификована да би се обезбедиле исправне путање до датотеке и резултати за преведени СЦСС. Ово решење је идеално за програмере који желе да одржавају СЦСС компилацију у оквиру .НЕТ буилд пипелине-а, али им је потребна модернија синтакса и компатибилност са ажурираним алатима.

Треће решење утиче на то Вебпацк, који је напреднији алат за груписање и управљање имовином као што су ЈаваСцрипт, ЦСС и СЦСС у модерним веб апликацијама. Интеграцијом Вебпацк-а, ми управљамо процесом компилације СЦСС-а коришћењем специфичних учитавача као што су сасс-лоадер и цсс-лоадер. Ови алати су додати конфигурацији Вебпацк-а, омогућавајући му да ефикасно обрађује СЦСС датотеке. Овај метод је посебно користан за велике пројекте који захтевају напредно управљање имовином на фронт-енд.

На крају, тестирање јединица је уведено као важан корак у потврђивању процеса компилације СЦСС-а. Коришћење Јест у спрези са чвор-сасс, можемо да аутоматизујемо тестове како бисмо осигурали да су СЦСС датотеке правилно компајлиране у ЦСС без грешака. Ово не само да рано открива проблеме, већ и обезбеђује доследност у различитим окружењима. Постављањем аутоматизованих тестова, програмери могу да задрже поверење да њихова СЦСС компилација ради како се очекује, чак и када се пројекат развија или промене зависности. Овај приступ је од суштинског значаја за обезбеђивање дугорочне стабилности Блазор апликација.

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

Истраживање алтернативних метода за СЦСС компилацију у Блазору

Још један важан аспект који треба узети у обзир при руковању СЦСС-ом у Блазор апликацијама је флексибилност интеграције спољних алата као што су Гулп или тркачи задатака. Док су НПМ скрипте и Вебпацк ефикасни за компајлирање СЦСС-а, Гулп може пружити детаљнију контролу над гледањем датотека, оптимизацијом и руковањем грешкама. Укључивањем Гулп-а у ваш Блазор пројекат, можете аутоматизовати задатке као што су компајлирање СЦСС-а, минимизирање ЦСС-а, па чак и поновно учитавање претраживача након промена.

Гулп функционише тако што креира цевовод који струји трансформације датотека. На пример, можете написати Гулп задатак који надгледа ваше СЦСС датотеке, компајлира их када се открију промене и смешта резултирајуће ЦСС датотеке у одговарајући директоријум. Ово може бити посебно корисно за веће пројекте са много датотека којима су потребна стална ажурирања. Штавише, Гулп нуди велику флексибилност омогућавајући вам да пишете прилагођене функције и добро се интегрише са другим системима за изградњу.

Други приступ који треба размотрити је коришћење Грунт за СЦСС компилацију. Грунт је још један популаран ЈаваСцрипт покретач задатака, сличан Гулпу, али са другачијим стилом конфигурације. Грунт ради тако што дефинише задатке у а Gruntfile.js, који описује кораке које треба предузети приликом компајлирања СЦСС-а. Грунт може бити одличан избор ако ваш пројекат већ има Грунт као део процеса израде или ако тражите добро документован алат са разним додацима. И Гулп и Грунт, заједно са Вебпацк-ом, пружају модерне алтернативе за управљање СЦСС компилацијом у Блазору.