تقسيم سمة SCSS إلى ملفات متعددة

توثيق أدلة المطور
1

أصبحت السمات ومكونات السمات أكثر قوة بشكل مطرد، ويصبح المطورون أكثر طموحًا. لتسهيل الأمور على المطورين، يمكن للسمات الآن تقسيم ملفات SCSS الخاصة بها إلى ملفات متعددة.

عند إنشاء سمة جديدة باستخدام أداة سطر الأوامر للسمات (theme CLI)، أو مشاركة سمة على github، ما عليك سوى إنشاء مجلد جديد يسمى scss. املأه بملفات .scss الخاصة بك، باتباع أي هيكل مجلد، وستكون جميع الملفات متاحة لك للاستيراد في أقسام SCSS المشتركة / لسطح المكتب / للجوال في السمة الخاصة بك.

على سبيل المثال، إذا كنت تريد أن يكون متغير مشترك متاحًا لكل من SCSS للجوال وسطح المكتب، يمكنك القيام بشيء كهذا:

scss/my-folder/variables.scss

$favourite-color = red;

desktop/desktop.scss

@import "my-folder/variables";
body {
  background-color: $favourite-color;
}

mobile/mobile.scss

@import "my-folder/variables";
body {
  color: $favourite-color;
}

تمت إضافة هذه الميزة في الإصدار v2.3.0.beta8، لذا لا تستخدم هذه الميزات بعد إذا كنت بحاجة إلى الحفاظ على التوافق مع الإصدارات الأقدم من Discourse. يمكنك استخدام معلمة minimum_discourse_version في about.json لضمان عدم استخدام المكون الخاص بك على إصدار سابق.

يتم التحكم في إصدار هذه الوثيقة - اقترح تغييرات على github.

20 إعجابًا
Breaking up common.scss into multiple files in components?
Discourse 2.3.0.beta9 Release Notes
Need help with theme component Github
Please support any theme/component. css+html can be customized
2

This is amazing @david! Nice work!

I can’t wait to give this a whirl.

8 إعجابات
3

This is a great! I can now remove my hack for getting around not being able to do this.

5 إعجابات
4

@david this is great, but unfortunately it doesn’t seem to work when the theme is a component. Not sure if that’s a known bug.

You can see it happen with this very simple theme: GitHub - LeoMcA/discourse-multi-scss-component

When converted to a stand-alone theme the background colour will be green, but when used as a component within another theme it doesn’t change the background colour at all.

5 إعجابات
6

Thanks @LeoMcA, you’re right - this wasn’t working in components. The issue should be fixed in

4 إعجابات
7

هل من المفترض أن يعمل ذلك بعد؟ ملفات scss الافتراضية الخاصة بي (common/desktop/mobile) لا تعمل عند إضافة @import.

أو هل هناك توصية جديدة لتقسيم الملفات؟

8

هذا يجب أن يعمل بعد. هل يمكنك مشاركة عبارة @import الدقيقة التي تستخدمها، وهيكلية ملفات التنسيقات الخاصة بك؟

9

يحتوي إعداد السمة على هيكل ملفات افتراضي، وأضفت scss/test.scss ثم حددت @import "test";.

على وحدة التحكم (باستخدام discourse_theme watch) أحصل على:
✘ خطأ في scss المشترك: خطأ: الملف المراد استيراده غير موجود أو غير قابل للقراءة: test. في السطر 1 من common.scss

10

هل يحتوي ملف test.scss الخاص بك على أي محتوى؟

11

لقد أعلنت متغيرًا واحدًا فقط (بالمناسبة، هناك خطأ مطبعي في كتلة الكود الأولى أعلاه، حيث تم الإعلان باستخدام علامة التساوي: $favourite-color = red;)

لكنني حللت المشكلة للتو. قمت بتعيين الإصدار الأدنى في ملف about.json كـ v2.3.0.beta8، وعندما أزيل ذلك، يعمل كل شيء على ما يرام. لم أستخدم هذا من قبل، لذا لست متأكدًا من ماهية المشكلة في الإعلان.

إعجاب واحد (1)
12

مثير للاهتمام! إذا قمت بإضافة الحد الأدنى من الإصدار مرة أخرى، هل يتعطل بشكل متكرر؟ إذا كان الأمر كذلك، هل تمانع في ضغط السماعة المعطلة ومشاركتها هنا؟ (أو إرسالها لي عبر الرسائل الخاصة)

إعجاب واحد (1)
13

كما قيل، لم أقوم بتعيين إصدار أدنى من قبل. لذا قمت بنسخه أعلاه كـ v2.3.0.beta8. هذا يفشل، لكن 2.3.0.beta8 يعمل بشكل جيد تمامًا.

14

هل من الممكن استخدام ملفات scss من حزمة node_modules؟ على سبيل المثال:

@import 'bootstrap/scss/bootstrap.scss';
@import '../node_modules/bootstrap/scss/bootstrap.scss';

في كلتا الحالتين لا يمكنني الاستيراد من مجلد /scss.