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

أصبحت السمات ومكونات السمات أكثر قوة بشكل مطرد، ويصبح المطورون أكثر طموحًا. لتسهيل الأمور على المطورين، يمكن للسمات الآن تقسيم ملفات 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 إعجابًا

This is amazing @david! Nice work!

I can’t wait to give this a whirl.

8 إعجابات

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

5 إعجابات

@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 إعجابات

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

4 إعجابات

Is that still supposed to work? My default scss files (common/desktop/mobile) don’t work when I add an @import.

Or is there a new recommendation for splitting files?

This should still work. Can you share the precise @import statement you’re using, and the file structure of your stylesheets?

The theme setup has default file structure and I added scss/test.scss Then I state @import "test";

On the console (using discourse_theme watch) I get:
✘ Error in common scss: Error: File to import not found or unreadable: test. on line 1 of common.scss

Does your test.scss file have any content?

Just declared one variable (btw there’s a typo on the first code block above, declared with equals: $favourite-color = red;)

But just solved it. I set the minimum version in about.json as v2.3.0.beta8 and when I remove that, it works just fine. Never used that before, so not sure what’s wrong with the declaration.

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

Interesting! If you add the minimum version again, does it consistently break? If so, would you mind zipping up the broken theme and sharing it here? (or PMing it to me)

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

As said, I never set a min version before. So I just copied it above as v2.3.0.beta8. This breaks, but 2.3.0.beta8 works just fine.

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

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

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