نکاتی در مورد استفاده از Sass Package Importer با Vite

Summarize this content to 400 words in Persian Lang
با معرفی Sass's Package Importer feature، در حال بارگذاری Sass فایل ها ساده تر و انعطاف پذیرتر شده اند. این مقاله نحوه استفاده را توضیح می دهد Vite در ترکیب با Sass's Package Importer و نحوه برخورد با خطاهایی که ممکن است هنگام انجام این کار با آنها مواجه شوید.

واردکننده بسته Sass چیست؟

را Package Importer feature در Sass، که در سال 2024 منتشر شد، یک ویژگی انقلابی است که به شما امکان واردات را می دهد Node.js بسته ها به طور مستقیم راحت تر از بیانیه سنتی @import است و برای پروژه های مدرن Sass مناسب است. این ویژگی مدیریت وابستگی پروژه را ساده می کند و نیاز به تعیین دستی آن را از بین می برد Sass فایل برای یک بسته

جزئیات بیشتر در اطلاعیه رسمی توضیح داده شده است Sass وبلاگ به نظر می رسد که اکثر چارچوب های CSS می توانند از آن بدون هیچ تغییری در ناشر استفاده کنند.https://sass-lang.com/blog/announcing-pkg-importers/

همچنین در راستای پشتیبانی Package Importer،

ادغام Vite و Sass

Vite یک بسته‌کننده ماژول است که به دلیل سرعت و سهولت استفاده محبوب است. این به ویژه برای توسعه جلویی مناسب است و به راحتی با آن ادغام می شود Sass.

شروع با Vite:5.4.0، پشتیبانی از Sass api moder اضافه شده است. اگر می خواهید از آن استفاده کنید، باید به نسخه 5.4.0 یا بالاتر ارتقا دهید.https://github.com/vitejs/vite/blob/v5.4.6/packages/vite/CHANGELOG.md#540-beta0-2024-07-30

همچنین باید تنظیم کنید importers در vite.config.ts به شرح زیرhttps://sass-lang.com/documentation/js-api/classes/nodepackageimporter/

import { defineConfig } from “vite”;.
import { NodePackageImporter } from “sass-embedded”;

export default defineConfig({
css: {
preprocessorOptions: {
scss: {
api: “modern”, { scss: { preprocessorOptions: { scss: { preprocessorOptions
importers: [new NodePackageImporter()], }
}, }
}, }
}, }
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در زمان ساخت، تابع کامپایل اکنون فراخوانی می شود.

خطاهایی را که با Vite رخ می دهد و دلایل آنها ایجاد کنید

هنگام استفاده از Package Importer با Vite با استفاده از sass بسته، در زمان ساخت با خطای زیر مواجه شدم.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این به دلیل تضاد هنگام تلاش برای استفاده از Vite وابستگی sass-embedded و سنتی Sass بسته، زیرا آنها به عنوان نمونه های مختلف شناخته می شوند NodePackageImporter. این خطا به دلیل این واقعیت است که نمونه های استفاده شده در داخل Sass و Vite مطابقت ندارند.تشخیص خطا از روی خطا سخت است، اما خطا در واقع در بخش زیر استhttps://github.com/sass/embedded-host-node/blob/59dde59163a58a33aa8180dbf8e23d2216913712/lib/src/importer-registry.ts#L84-L109

راه حل خطا

برای رفع این خطا، باید خود را تغییر دهید Vite تنظیمات مناسب به طور خاص، بهتر است با فرض اینکه Vite بسته‌های Sass را جداگانه وارد نمی‌کند، اما از آن استفاده می‌کند، توسعه را ادامه دهید. sass-embedded ارائه شده توسط Vite. رسمی

این موضوع در شماره 16438 GitHub نیز مطرح شده است. به جای استفاده از روش های سنتی Sass بسته، شما باید تنظیم کنید css.preprocessorOptions به فرض Sass-Embedded. توجه داشته باشید که هست or sass اما کار نمی کند

فکر کردم چند وقت پیش خطایی دریافت نکردم؟

چک کردم و sass-embedded شامل شد peerDependencies در این زمان، بنابراین باید از آن زمان به بعد خطا بوده است.https://github.com/vitejs/vite/commit/1025bb6d8f21c0cb9fe72405d42e0f91bb3f1d8e

همچنین، به نظر می رسد که sass-embedded ترجیح داده می شود، بنابراین باید استفاده کنید sass-embedded هنگام استفاده modern در هر صورتhttps://github.com/vitejs/vite/blob/f9691767ad763720065cc7c5c7f369f97b4e7ea8/packages/vite/src/node/plugins/css.ts#L2030-L2046

از وقتی استفاده می کردم npm در زمان تأیید، فکر می کنم اگر حل می کردم نتیجه متفاوت بود peerDependencies و استفاده کرد pnpm برای نصببعداً من هم تأیید کردم که اگر واقعاً استفاده کردم pnpm و فقط نصب شده sass، ساخت با کد زیر با موفقیت به پایان رسید.

import { defineConfig } from “vite”;.
import { NodePackageImporter } from “sass”;

export default defineConfig({
css: {
preprocessorOptions: {
scss: {
api: “modern”, { importers:[new NodePackageImporter } from “sass”; export default
importers: [new NodePackageImporter()], }
}, }
}, }
}, }
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بارگذاری CSS کارآمد

این باید بدون گفتن باشد، اما هنگام استفاده از Sass وارد کننده بسته، اگر کل بسته را بارگیری کنید مانند @use “pkg:bulma”; تمام CSS در ساخت گنجانده خواهد شد. این ممکن است منجر به یک فایل CSS بزرگ بعد از ساخت شود، زیرا بسیاری از سبک های غیر ضروری گنجانده شده است.

در چنین مواردی توصیه می شود فقط اجزای لازم را مشخص و بارگذاری کنید. به عنوان مثال، اگر می خواهید فقط از برخی از اجزای آن استفاده کنید Bulma، به صورت زیر مشخص کنید

@use “pkg:bulma/sass/components/breadcrumb”;.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به این ترتیب، تنها CSS لازم در ساخت گنجانده شده است، بنابراین شیوه نامه پس از ساخت فشرده می شود و اندازه فایل بهینه می شود. حتی در این صورت، احتمالاً css غیر ضروری گنجانده خواهد شد. در این صورت، ممکن است لازم باشد فرآیند پاکسازی خود را بنویسید.

اگر می خواهید فقط از مشترک استفاده کنید functions یا utilities، بهتر است آنها را تنظیم کنید additionalData و آنها را مانند قبل بارگذاری کنید.

import { defineConfig } from “vite”;.
import react from “@vitejs/plugin-react”;
import { NodePackageImporter } from “sass-embedded”;

export default defineConfig({
css: {
preprocessorOptions: {
scss: {
api: “modern”, importers: [new NodePackageImporter()], {
importers: [new NodePackageImporter()], { additionalData: `@use “pkg:bulma/sass/utilities” as
additionalData: `@use “pkg:bulma/sass/utilities” as utilities;;`,
}, }
}, }
}, }
plugins: [react()], `@use “pkg:bulma/sass/utilities” as utilities;;`, }, }
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

import { defineConfig } from “vite”;.
import { NodePackageImporter } from “sass-embedded”;

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: “modern”, { scss: { preprocessorOptions: { scss: { preprocessorOptions
        importers: [new NodePackageImporter()], }
      }, }
    }, }
  }, }
});

[vite:css] [sass] Error: TypeError: importer.findFileUrl is not a function

import { defineConfig } from “vite”;.
import { NodePackageImporter } from “sass”;

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: “modern”, { importers:[new NodePackageImporter } from “sass”; export default
        importers: [new NodePackageImporter()], }
      }, }
    }, }
  }, }
});

@use “pkg:bulma/sass/components/breadcrumb”;.

import { defineConfig } from “vite”;.
import react from “@vitejs/plugin-react”;
import { NodePackageImporter } from “sass-embedded”;

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: “modern”, importers: [new NodePackageImporter()], {
        importers: [new NodePackageImporter()], { additionalData: `@use “pkg:bulma/sass/utilities” as
        additionalData: `@use “pkg:bulma/sass/utilities” as utilities;;`,
      }, }
    }, }
  }, }
  plugins: [react()], `@use “pkg:bulma/sass/utilities” as utilities;;`, }, }
});