Split up theme SCSS into multiple files

Документация Руководства для разработчиков
1

Themes and theme components are becoming steadily more powerful, and developers are getting more and more ambitious. To make things easier for developers, themes can now split their SCSS into multiple files.

When creating a new theme with the theme CLI, or sharing a theme on github, simply create a new folder called scss. Fill it with your .scss files, following any folder structure, and all the files will be available for you to import in the common / desktop / mobile SCSS sections of your theme.

For example, if you want to have a common variable available to both mobile and desktop SCSS, you could do something like this:

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;
}

This feature was added in v2.3.0.beta8, so do not use these features quite yet if you need to maintain backwards compatibility with older versions of Discourse. You can use the minimum_discourse_version parameter of about.json to ensure your component doesn’t get used on an earlier version.

This document is version controlled - suggest changes on 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, это здорово, но, к сожалению, похоже, что это не работает, когда тема является компонентом. Не уверен, что это известная ошибка.

Вы можете увидеть это на примере вот такой простой темы: GitHub - LeoMcA/discourse-multi-scss-component · GitHub

При конвертации в отдельную тему цвет фона станет зелёным, но при использовании в качестве компонента внутри другой темы цвет фона вообще не изменится.

5 лайков
6

Спасибо @LeoMcA, вы правы — это не работало в компонентах. Проблема должна быть исправлена в

4 лайка
7

Это всё ещё должно работать? Мои файлы scss по умолчанию (common/desktop/mobile) не работают, когда я добавляю @import.

Или есть новая рекомендация по разделению файлов?

8

Это всё ещё должно работать. Можете ли вы поделиться точным оператором @import, который вы используете, и структурой файлов ваших таблиц стилей?

9

Настройка темы имеет структуру файлов по умолчанию, и я добавил scss/test.scss. Затем я указал @import "test";.

В консоли (используя discourse_theme watch) я получаю:
✘ Ошибка в common 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.