Пользовательские CSS-стили не применяются к моему Discourse

Поддержка
1

Как следует из вчерашнего обновления (моего хостинга сервера по адресу https://doomemacs.discourse.group), ни один из моих пользовательских CSS-файлов не применяется. Изменения в моих темах или CSS-стилях компонентов не имеют эффекта (хотя изменения в тегах <head> или других разделах HTML работают нормально).

Есть один подозрительный тег link, указывающий на пустой файл стилей, хэш которого меняется каждый раз, когда я изменяю свой CSS. Похоже, что Discourse молча не может скомпилировать мои файлы стилей. В моих журналах ошибок нет упоминаний о сбоях, а загрузка discourse_theme моих файлов стилей проходит без замечаний, но безрезультатно.

Не мог бы администратор, пожалуйста, посмотреть?

2

~~Я не уверен, но, кажется, вы столкнулись с этим изменением: https://meta.discourse.org/t/restrict-editing-of-remote-themes/170051~~
Похоже, это неверно :smiley:

4

Привет, @hlissner, я работаю над исправлением этой проблемы: недавнее обновление ядра сломало компонент темы на вашем экземпляре. Исправление будет готово в ближайшее время.

5

Исправление уже объединено в основной репозиторий, и ваш сайт развернут, @hlissner. Обратите внимание, что я отключил два компонента темы: компонент с пользовательскими стилями (вы можете включить его) и discourse-theme-category-homepage, который необходимо обновить в upstream, прежде чем вы сможете его включить. Подробнее об этом в Enhanced category-box display component - #7 by pmusaraj

6

Спасибо! Стили теперь загружаются корректно, однако переменные цвета SCSS не наследуют цветовую схему моей темы. Например, $secondary возвращает значение по умолчанию #ffffff вместо #282c34. Возможно, это ещё одна регрессия, вызванная коммитом e8b8272?

7

Да, это ещё одна регрессия. Исправление немного сложное… и для подавляющего большинства цветовых переменных компоненты тем должны использовать пользовательские свойства CSS. Вы можете ознакомиться с этим руководством Update themes and plugins to support automatic dark mode, чтобы получить общее представление и примеры того, как добавлять пользовательские цветовые вариации в специальном файле color_definitions.scss в вашем компоненте темы.

Дайте знать, как получится!

8

Я делал это там, где мог, но без доступа к этим переменным я не могу преобразовывать цвета в зависимости от активной схемы. Например:

$primary-low: dark-light-choose(darken($secondary, 12%), lighten($secondary, 10%));

:root {
    --primary-low: #{$primary-low};
}

Есть ли лучший способ обойти это? Я мог бы добавить стили напрямую к каждой теме, но планирую иметь их множество, и предпочёл бы обрабатывать некоторые общие случаи из центрального глобального компонента, где это возможно.

9

Да, это имеет смысл. Вы пробовали добавить этот SCSS-код в новый файл common/color_definitions.scss? Если добавить его туда, всё должно заработать. (В интерфейсе также есть вкладка для этого специального стиля.)

10

Как раз собирался попробовать именно это, но Discourse упал с сообщением «Произошла непредвиденная проблема в программном обеспечении, управляющем этим форумом», ха-ха.

11

Вы можете получить доступ к сайту через /safe-mode, что отключает темы и компоненты, после чего вы сможете увидеть, что произошло.

Это, однако, ещё одна регрессия: ошибки SCSS не должны приводить к падению всего сайта. Я обязательно исправлю это в ближайшие несколько дней.

12

Это сработало! Переменные цвета корректно заданы в области видимости color_definitions.scss. Единственная проблема в том, что я не могу импортировать из него другие таблицы стилей. Например:

// scss/globals.scss
$foo: "#000000";

// color_definitions.scss
@import "globals";
:root { --foo: #{$foo}; }

В логах ошибок Discourse это выглядит так:

SCSS compilation error: Error: File to import not found or unreadable: globals.scss.
        on line 129 of color_definitions.scss
>> @import "globals";

Я могу переработать свои таблицы стилей, чтобы избежать этой зависимости, так что это не критично, но можно ли это считать ошибкой?

13

Да, я создал pull request для исправления проблемы с импортом, он должен быть принят завтра.

14

Спасибо за помощь! PR был принят, мой экземпляр обновлён, и я могу импортировать стили в color_definitions.scss, но эта проблема снова возникла:

На этот раз это влияет и на переменные в color_definitions.scss.

15

Возможно ли сделать то, что вы пытаетесь сделать, не наследуя переменные SCSS родительской темы? Это очень узкий сценарий использования, и я бы предпочел не добавлять такую сложность в ядро.

16

Это определённо возможно, просто неудобно, так как для каждой темы потребуется сотни строк шаблонного SCSS-кода (плюс система сборки для обмена переменными между всеми темами), что не было необходимо ещё неделю назад. Тем не менее, вероятно, лучше всё же сделать это, чтобы избежать проблем с будущими рефакторингами процесса сборки Discourse. Я займусь этим. Спасибо!

17

Возможно, это руководство следует пересмотреть или удалить, если оно больше не поддерживается.

18

Да, это руководство немного устарело, однако проблема в вашем случае связана не с основными переменными, а с цветами SCSS в компоненте, который не наследует цветовую схему темы. (Тем не менее, я изучу руководство и обновлю его.)

Немного контекста: в августе–сентябре 2020 года мы перешли на использование пользовательских свойств CSS для цветов. Основная причина этого изменения заключалась в том, чтобы поддерживать автоматический темный режим легким и быстрым способом. Темы содержат CSS и JS, поэтому их нельзя быстро переключать, но с помощью пользовательских свойств CSS цветовые схемы можно менять на лету без перезагрузки страницы.

Я вижу на вашем сайте, что у вас есть 4 темы с индивидуальной цветовой схемой и общий компонент для стилей, используемый во всех темах. Вы можете достичь практически того же результата, используя одну основную тему (которая будет содержать все общие стили) и 4 выбираемые пользователем цветовые схемы. Вам нужно будет перенести все вычисления цветов в файл color_definitions.scss основной темы, но это вполне выполнимо. Я постараюсь найти время и попробую реализовать это завтра.

19

Это было бы идеально, но я пришел к текущей настройке, потому что несколько цветовых схем не работали для меня. Некоторые цветовые схемы дают неудачные цвета для автоматически генерируемых переменных, таких как --primary-low. Простое переопределение переменной может сработать для одной цветовой схемы, но не для другой. Более общее решение возможно, если переопределить её на основе $primary или условно — в зависимости от ID или названия цветовой схемы, но без этого необходимы несколько тем, чтобы иметь отдельный color_definitions.scss для каждой темы (дублирование, которого я хотел бы избежать). Или есть ли лучший вариант, который я упускаю?