الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

استيراد postcss

البرنامج المساعد PostCSS لتحويل قواعد @import عن طريق تضمين المحتوى.

يمكن لهذا البرنامج المساعد أن يستهلك الملفات المحلية أو وحدات العقدة أو web_modules. لحل مسار قاعدة @import ، يمكنها البحث في الدليل الجذر (افتراضيًا process.cwd() )، web_modules ، node_modules ، أو الوحدات النمطية المحلية. عند استيراد وحدة نمطية، ستبحث عن ملف index.css أو الملف المشار إليه في package.json في style أو الحقول main . يمكنك أيضًا توفير مسارات متعددة يدويًا للنظر فيها.

ملحوظات:

  • ربما ينبغي استخدام هذا البرنامج المساعد باعتباره البرنامج المساعد الأول في قائمتك. بهذه الطريقة، ستعمل المكونات الإضافية الأخرى على AST كما لو كان هناك ملف واحد فقط للمعالجة، ومن المحتمل أن تعمل كما تتوقع .

  • إن تشغيل postcss-url بعد استيراد postcss في سلسلة المكونات الإضافية الخاصة بك سيسمح لك بضبط url() للأصول (أو حتى تضمينها) بعد تضمين الملفات المستوردة.

  • من أجل تحسين الإخراج، سيقوم هذا البرنامج المساعد باستيراد ملف مرة واحدة فقط في نطاق معين (الجذر، استعلام الوسائط ...). يتم إجراء الاختبارات من مسار ومحتوى الملفات المستوردة (باستخدام جدول التجزئة). إذا لم يكن هذا السلوك هو ما تريده، فانظر إلى خيار skipDuplicates

  • إذا كنت تبحث عن Glob Imports ، فيمكنك استخدام postcss-import-ext-glob لتوسيع نطاق postcss-import.

  • إذا كنت تريد استيراد مصادر بعيدة، فيمكنك استخدام postcss-import-url مع خيار البرنامج الإضافي dataUrls الخاص به لتوسيع نطاق postcss-import.

  • يتم نقل الواردات التي لم يتم تعديلها (بواسطة options.filter أو لأنها عمليات استيراد عن بعد) إلى أعلى المخرج.

  • يحاول هذا البرنامج المساعد اتباع مواصفات CSS @import ؛ يجب أن تسبق عبارات @import جميع العبارات الأخرى (إلى جانب @charset ).

تثبيت

 تثبيت $ npm -D postcss-import

الاستخدام

ما لم تكن ورقة الأنماط الخاصة بك في نفس المكان الذي تقوم فيه بتشغيل postcss ( process.cwd() )، فستحتاج إلى استخدام الخيار from لجعل عمليات الاستيراد النسبية تعمل.

 // التبعياتconst fs = require("fs")const postcss = require("postcss")const atImport = require("postcss-import")// css المراد معالجتهconst css = fs.readFileSync("css/input.css" ، "utf8")// عملية csspostcss()
  .استخدام (في الاستيراد ())
  .process(css, {// `من` الخيار مطلوب هنا من: "css/input.css"
  })
  .ثم((النتيجة) => {إخراج const = result.cssconsole.log(output)
  })

css/input.css :

 /* يتم الاحتفاظ بعناوين url البعيدة */@import "https://example.com/styles.css";/* يمكن أن تستهلك `node_modules` أو `web_modules` أو الوحدات المحلية */@import "cssrecipes-defaults"; /* == @import "../node_modules/cssrecipes-defaults/index.css"; */@import "normalize.css"; /* == @import "../node_modules/normalize.css/normalize.css"; */@import "foo.css"; /* نسبة إلى css/ وفقًا للخيار `من` أعلاه *//* جميع التدوينات القياسية لقيمة "url" مدعومة */@import url(foo-1.css);@import url("foo-2. css");@import "bar.css" (العرض الأدنى: 25em);@import 'baz.css' Layer(baz-layer);body { الخلفية: أسود;
}

سوف أعطيك:

 @import "https://example.com/styles.css";/* ... محتوى ../node_modules/cssrecipes-defaults/index.css *//* ... محتوى ../node_modules/normalize .css/normalize.css *//* ... محتوى css/foo.css *//* ... محتوى css/foo-1.css *//* ... محتوى css/foo-2.css */@media (min-width: 25em) {/* ... محتوى css/bar.css */@layer baz-layer {/* * ... محتوى css/baz.css */body { الخلفية: أسود؛
}

الخروج من الاختبارات لمزيد من الأمثلة.

خيارات

filter

النوع: Function
الافتراضي: () => true

قم فقط بتحويل الواردات التي ترجع لها وظيفة الاختبار true . سيتم ترك الواردات التي ترجع لها وظيفة الاختبار false كما هي. تحصل الدالة على المسار المراد استيراده كوسيطة ويجب أن تُرجع قيمة منطقية.

root

النوع: String
الافتراضي: process.cwd() أو dirname لـ postcss from

حدد الجذر حيث سيتم حل المسار (على سبيل المثال: المكان الذي توجد به node_modules ). لا ينبغي أن تستخدم كثيرا.
ملاحظة: @import المتداخل سيستفيد بالإضافة إلى ذلك من الاسم النسبي للملفات المستوردة.

path

النوع: String|Array
تقصير: []

سلسلة أو مجموعة من المسارات في مكان البحث عن الملفات.

plugins

النوع: Array
الافتراضي: undefined

مجموعة من المكونات الإضافية التي سيتم تطبيقها على كل الملفات المستوردة.

resolve

النوع: Function
الافتراضي: null

يمكنك توفير محلل مسار مخصص مع هذا الخيار. تحصل هذه الوظيفة على وسيطات (id, basedir, importOptions, astNode) ويجب أن تُرجع مسارًا أو مجموعة من المسارات أو وعدًا يحل المسار (المسارات). إذا لم تقم بإرجاع مسار مطلق، فسيتم تحويل المسار الخاص بك إلى مسار مطلق باستخدام المحلل الافتراضي. يمكنك استخدام العزم لهذا الغرض.

load

النوع: Function
الافتراضي: خالي

يمكنك استبدال طريقة التحميل الافتراضية عن طريق ضبط هذا الخيار. تحصل هذه الوظيفة على وسيطات (filename, importOptions) وتقوم بإرجاع المحتوى أو المحتوى الموعود.

skipDuplicates

النوع: Boolean
الافتراضي: true

افتراضيًا، يتم تخطي الملفات المشابهة (المستندة إلى نفس المحتوى). إنه لتحسين الإخراج وتخطي الملفات المشابهة مثل normalize.css على سبيل المثال. إذا لم يكن هذا السلوك هو ما تريده، فما عليك سوى ضبط هذا الخيار على false لتعطيله.

addModulesDirectories

النوع: Array
تقصير: []

مجموعة من أسماء المجلدات لإضافتها إلى محلل العقدة. سيتم إلحاق القيم بأدلة الحل الافتراضية: ["node_modules", "web_modules"] .

هذا الخيار مخصص فقط لإضافة أدلة إضافية إلى المحلل الافتراضي. إذا قمت بتوفير محلل خاص بك عبر خيار تكوين resolve أعلاه، فسيتم تجاهل هذه القيمة.

warnOnEmpty

النوع: Boolean
الافتراضي: true

بشكل افتراضي، يحذرك postcss-import عند استيراد ملف فارغ.
اضبط هذا الخيار على false لتعطيل هذا التحذير.

مثال مع بعض الخيارات

 const postcss = require("postcss")const atImport = require("postcss-import")postcss()
  .use(atImport({path: ["src/css"],
  }))
  عملية (cssString)
  .then((result) => {const { css } = result
  })

دعم رسالة dependency

يضيف postcss-import رسالة إلى result.messages لكل @import . الرسائل تكون بالصيغة التالية: 

{
  type: 'dependency',
  file: absoluteFilePath,
  parent: fileContainingTheImport
}

هذا مخصص للاستخدام بشكل أساسي من قبل مشغلي postcss الذين ينفذون مراقبة الملفات.

المساهمة

  • ⇄ طلبات السحب و ★ النجوم مرحب بها دائمًا.

  • بالنسبة للأخطاء وطلبات الميزات، يرجى إنشاء مشكلة.

  • يجب أن تكون طلبات السحب مصحوبة باجتياز اختبارات آلية ( $ npm test ).

سجل التغيير

رخصة

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل