Sửa mã lỗi 64 khi sử dụng Node.js và NPM để chạy "npm run sass" trong Blazor

Khắc phục sự cố biên dịch Blazor với Sass và NPM

Khi phát triển ứng dụng Blazor, việc tích hợp các kiểu SCSS (Sass) vào quy trình làm việc của bạn có thể nâng cao tính linh hoạt trong thiết kế của dự án. Tuy nhiên, cũng như nhiều thiết lập, một số cấu hình nhất định có thể dẫn đến lỗi trong quá trình xây dựng. Trong trường hợp này xảy ra mã lỗi 64 khi chạy lệnh npm chạy sass trong một dự án Blazor.

Sự cố này phát sinh khi cố gắng biên dịch tệp SCSS thành CSS bằng cách sử dụng tùy chỉnh Lệnh thực thi trong tệp .csproj. Mặc dù thiết lập này có thể đã hoạt động trong các phiên bản Blazor hoặc Visual Studio cũ hơn, nhưng bạn có thể thấy rằng quá trình xây dựng không thành công do những thay đổi trong công cụ hoặc môi trường.

Trong bài viết này, chúng tôi sẽ khám phá cách xác định nguyên nhân của mã lỗi 64 và cung cấp các bước để cập nhật hoặc thay thế cấu hình hiện có nhằm đảm bảo tệp SCSS của bạn được biên dịch chính xác. Bằng cách điều chỉnh cách tiếp cận của mình, bạn có thể tránh được các lỗi biên dịch và tích hợp Sass vào dự án Blazor của mình một cách suôn sẻ.

Hãy đi sâu vào chi tiết cụ thể về lý do xảy ra lỗi này, vai trò của Node.js và NPM trong sự cố này cũng như cách triển khai giải pháp cập nhật cho ứng dụng Blazor của bạn bằng .NET 8 và Visual Studio 2022.

Tìm hiểu giải pháp cho mã lỗi 64 trong Blazor

Các tập lệnh được cung cấp trong các ví dụ được thiết kế để giải quyết mã lỗi 64 xảy ra trong quá trình biên dịch tệp SCSS trong dự án Blazor bằng Node.js và NPM. Lỗi này thường xuất phát từ cấu hình không chính xác trong tệp dự án Blazor (.csproj) hoặc xử lý quá trình biên dịch SCSS không đúng cách. Giải pháp đầu tiên loại bỏ nhu cầu biên dịch SCSS trực tiếp từ quá trình xây dựng .NET bằng cách tải nó xuống NPM sử dụng tập lệnh tùy chỉnh trong gói.json. Cách tiếp cận này đơn giản hóa việc biên dịch các tệp SCSS bằng cách sử dụng nút-sass lệnh biên dịch tất cả các tệp SCSS thành CSS và lưu trữ chúng trong thư mục đầu ra thích hợp.

Trong giải pháp thứ hai, chúng tôi đã giải quyết các vấn đề cú pháp trong Lệnh thực thi trong tệp .csproj. Ở đây chúng tôi đã giới thiệu việc sử dụng npx để đảm bảo rằng các mô-đun Node được cài đặt cục bộ có thể được thực thi mà không cần cài đặt chung. Điều này giúp duy trì sự phụ thuộc của dự án một cách rõ ràng. Lệnh bên trong tệp .csproj cũng đã được sửa đổi để đảm bảo đường dẫn và đầu ra tệp thích hợp cho SCSS đã biên dịch. Giải pháp này lý tưởng cho các nhà phát triển muốn duy trì quá trình biên dịch SCSS trong quy trình xây dựng .NET nhưng cần cú pháp hiện đại hơn và khả năng tương thích với các công cụ cập nhật.

Giải pháp thứ ba thúc đẩy Gói web, đây là một công cụ nâng cao hơn để đóng gói và quản lý các nội dung như JavaScript, CSS và SCSS trong các ứng dụng web hiện đại. Bằng cách tích hợp Webpack, chúng tôi xử lý quá trình biên dịch SCSS thông qua việc sử dụng các trình tải cụ thể như sass-loader Và trình tải css. Các công cụ này được thêm vào cấu hình của Webpack, cho phép nó xử lý các tệp SCSS một cách hiệu quả. Phương pháp này đặc biệt hữu ích cho các dự án quy mô lớn yêu cầu quản lý tài sản mặt trước tiên tiến.

Cuối cùng, thử nghiệm đơn vị được giới thiệu như một bước quan trọng trong việc xác thực quy trình biên dịch SCSS. sử dụng trò đùa kết hợp với nút-sass, chúng tôi có thể tự động kiểm tra để đảm bảo rằng các tệp SCSS được biên dịch đúng cách sang CSS mà không gặp lỗi. Điều này không chỉ phát hiện sớm các vấn đề mà còn đảm bảo tính nhất quán trên các môi trường khác nhau. Bằng cách thiết lập các thử nghiệm tự động, các nhà phát triển có thể duy trì sự tin tưởng rằng quá trình biên dịch SCSS của họ đang hoạt động như mong đợi, ngay cả khi dự án phát triển hoặc các phần phụ thuộc thay đổi. Cách tiếp cận này rất cần thiết để đảm bảo sự ổn định lâu dài trong các ứng dụng Blazor.

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

Khám phá các phương pháp thay thế để biên dịch SCSS trong Blazor

Một khía cạnh quan trọng khác cần xem xét khi xử lý SCSS trong ứng dụng Blazor là tính linh hoạt của việc tích hợp các công cụ bên ngoài như Nuốt hoặc người chạy nhiệm vụ. Trong khi các tập lệnh NPM và Webpack có hiệu quả trong việc biên dịch SCSS, Gulp có thể cung cấp khả năng kiểm soát chi tiết hơn đối với việc xem tệp, tối ưu hóa và xử lý lỗi. Bằng cách kết hợp Gulp vào dự án Blazor của mình, bạn có thể tự động hóa các tác vụ như biên dịch SCSS, thu nhỏ CSS và thậm chí tải lại trực tiếp trình duyệt khi có thay đổi.

Gulp hoạt động bằng cách tạo một đường dẫn truyền các phép biến đổi tệp. Ví dụ: bạn có thể viết tác vụ Gulp để xem các tệp SCSS của mình, biên dịch chúng khi phát hiện thấy các thay đổi và đặt các tệp CSS kết quả vào thư mục thích hợp. Điều này có thể đặc biệt hữu ích cho các dự án lớn hơn với nhiều tệp cần cập nhật liên tục. Hơn nữa, Gulp mang lại sự linh hoạt cao bằng cách cho phép bạn viết các hàm tùy chỉnh và nó tích hợp tốt với các hệ thống xây dựng khác.

Một cách tiếp cận khác cần xem xét là sử dụng càu nhàu để biên soạn SCSS. Grunt là một trình chạy tác vụ JavaScript phổ biến khác, tương tự như Gulp nhưng có kiểu cấu hình khác. Grunt hoạt động bằng cách xác định các nhiệm vụ trong một Gruntfile.js, trong đó phác thảo các bước cần thực hiện khi biên dịch SCSS. Grunt có thể là một lựa chọn tuyệt vời nếu dự án của bạn đã có Grunt trong quá trình xây dựng hoặc nếu bạn đang tìm kiếm một công cụ được ghi chép đầy đủ với nhiều plugin khác nhau. Cả Gulp và Grunt, cùng với Webpack, đều cung cấp các giải pháp thay thế hiện đại để quản lý quá trình biên dịch SCSS trong Blazor.