Discourse にカスタム CSS が適用されません

昨日のアップデート(https://doomemacs.discourse.group でホストされている私のサーバー)以降、カスタム CSS が一切適用されなくなっています。テーマやコンポーネントの CSS を変更しても効果がありません(ただし、<head> や他の HTML セクションの変更は正常に機能します)。

疑わしい link タグが空のスタイルシートを指しており、CSS を変更するたびにそのハッシュ値が変わります。Discourse がスタイルシートのコンパイルに静かに失敗しているようです。エラーログには失敗の記載はなく、discourse_theme もスタイルシートを問題なくアップロードしていますが、効果はありません。

管理者の方で一度ご確認いただけませんでしょうか。

「いいね!」 3

~~確信はありませんが、おそらくこの変更にあたるのではないでしょうか https://meta.discourse.org/t/restrict-editing-of-remote-themes/170051~~
これは誤りのようですね :smiley:

「いいね!」 2

@hlissner さん、こんにちは。この問題の修正に取り組んでいます。最近のコアへのアップグレードが、あなたのインスタンスのテーマコンポーネントを壊してしまいました。まもなく修正版を提供する予定です。

「いいね!」 4

修正 はコアにマージされ、@hlissner さんのサイトもデプロイされました。なお、2 つのテーマコンポーネントを無効にしています。1 つ目はカスタムスタイルのコンポーネント(有効にできます)で、2 つ目は discourse-theme-category-homepage です。こちらは上流側で更新されるまで有効化できません。詳細については、Enhanced category-box display component - #7 by pmusaraj をご覧ください。

「いいね!」 5

ありがとうございます!スタイルシートは正しく読み込まれるようになりましたが、SCSS のカラー変数 が、テーマのカラーScheme を継承していないようです。例えば、$secondary#282c34 ではなく、デフォルト値である #ffffff を返しています。これは e8b8272 による別のリグレッションでしょうか?

「いいね!」 2

はい、これは別のリグレッションです。修正は少し複雑ですが、色変数の大部分については、テーマコンポーネントで CSS カスタムプロパティを使用する必要があります。テーマコンポーネント内の特別な color_definitions.scss ファイルにカスタムカラーバリエーションを追加する方法の概要と例については、こちらのガイド Update themes and plugins to support automatic dark mode をご覧ください。

進捗状況をお知らせください!

「いいね!」 2

できる範囲で対応してきましたが、これらの変数にアクセスできないため、現在のテーマに基づいて色を変換することができません。例えば:

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

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

これに対するより良い方法はありますか?各テーマに直接スタイルを追加することもできますが、多数のテーマを扱う予定であり、可能であればグローバルな中央コンポーネントで一般的なケースを処理したいと考えています。

「いいね!」 2

はい、その通りです。その SCSS を common/color_definitions.scss という新しいファイルに追加してみましたか?そこに追加すれば、問題なく動作するはずです。(その専用スタイルシート用のタブも UI にあります。)

「いいね!」 2

まさにそれを試そうとしたところで、ディスコースが「このディスカッションフォーラムを動かすソフトウェアで予期せぬ問題が発生しました」と表示されてダウンしてしまいました。ハハ。

「いいね!」 1

サイトには /safe-mode を通じてアクセスできます。これによりテーマやコンポーネントが無効化され、何が起きたかを確認できます。

ただし、これはまた別の回帰現象です。SCSS エラーがサイト全体を停止させるべきではありません。今後数日以内に必ず修正します。

「いいね!」 4

動作しました!色変数は color_definitions.scss のスコープ内で正しく設定されています。唯一の問題は、そこから他のスタイルシートをインポートできないことです。例えば:

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

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

Discourse のエラーログには以下が表示されます:

SCSS コンパイルエラー: エラー: インポート先のファイルが見つからないか読み取れません: globals.scss.
        color_definitions.scss の 129 行目
>> @import "globals";

依存関係を避けるためにスタイルシートを再設計することもできますが、これはバグと見なせるでしょうか?

「いいね!」 2

はい、インポートの問題を修正するプルリクエストを提出しました。明日にはマージされる見込みです。

「いいね!」 3

ご協力ありがとうございます!PR がマージされ、インスタンスが更新されたため、color_definitions.scss にスタイルシートをインポートできるようになりましたが、この問題が再発しています。

今回は、color_definitions.scss 内の変数にも影響が出ています。

「いいね!」 1

親テーマの SCSS 変数を継承せずに、おっしゃることを実現することは可能でしょうか?それは非常に限定的なユースケースであり、コアにその複雑さを追加したくありません。

「いいね!」 1

確かに可能ですが、不便です。テーマごとに数百行のボイラープレートSCSSが必要になり(さらにそれら間で変数を共有するためのビルドシステムも必要)、これは1週間前には不要でした。とはいえ、Discourseのビルドプロセスの将来のリファクタリングに伴う問題を避けるため、やはりこれを行うのがベストでしょう。それを実行します。ありがとうございます!

「いいね!」 1

もしこのガイドがもうサポートされていないのであれば、修正または削除すべきかもしれません。

「いいね!」 2

そのガイドは少し古くなっていますね。ただし、あなたの場合の問題の核心はコア変数ではなく、テーマの色 scheme を継承していないコンポーネント内の SCSS カラーです。(それでも、ガイドを確認して更新します。)

少し背景を説明しますと、2020 年 8 月〜9 月に、色に CSS カスタムプロパティを使用するように移行しました。この変更の主な理由は、軽量かつ高速な方法で 自動ダークモード をサポートするためでした。テーマには CSS と JS が含まれているため、素早く切り替えることはできませんが、CSS カスタムプロパティを使用すれば、ページをリフレッシュせずに色 scheme をその場で切り替えることができます。

あなたのサイトを見ると、それぞれ色 scheme を持つ 4 つのテーマと、共有スタイル用のテーマ間で共有されるコンポーネントが 1 つあります。これと実質的に同じことを、すべての共有スタイルを含む 1 つのメインテーマと、ユーザーが選択可能な 4 つの色 scheme で実現できます。メインテーマの color_definitions.scss ファイル内のすべての色計算を移動する必要がありますが、可能です。明日、時間が取れれば試してみます。

理想的ですね。ただし、現在の設定に落ち着いたのは、複数のカラーテーマでは私のケースでは機能しなかったためです。一部のカラーテーマでは、--primary-low のような自動生成された変数に対して不適切な色が生じます。単に変数を再定義すれば、あるカラーテーマでは機能しても、別のテーマでは機能しない可能性があります。$primary に基づいて再定義するか、カラーテーマの ID や名前に応じて条件付きで再定義すれば、より一般的な解決策が可能ですが、いずれにせよ複数のテーマが必要となるため、テーマごとの color_definitions.scss を持つことになります(重複を避けたいのですが)。他に良い選択肢は見落としているでしょうか?

このトピックは 27 日後に自動的に閉鎖されました。新しい返信は受け付けられなくなっています。