こんにちは。
リモートテーマで新しいborder-radius変数をオーバーライドしようとしましたが、コアの:root変数が常に優先されるようです。管理画面でテーマコンポーネントを作成すると、これらの変数をオーバーライドできます。テーマでオーバーライドする方法はありますか？何が足りないのでしょうか？ 
この小さな変更は非常に便利です。本当にありがとうございます！ 
わかりました、期待どおりに動作しました。私のテストサイトが私をからかっていただけでした。
「いいね！」 3
えっと、それは冗談ではなかったようです😄 リモートテーマでは、!important を使用しないと上書きできません。
このように使用した場合:arrow_down_small:
$border-radius: 2em !important;
:root {
--d-button-border-radius: #{$border-radius};
--d-input-border-radius: #{$border-radius};
}
それ以外の場合、このように試した場合:arrow_down_small:
:root {
--d-button-border-radius: 2em;
--d-input-border-radius: 2em;
}
コアの :root 変数が優先されます。
何が足りないのでしょうか？
よろしくお願いします！
「いいね！」 2
テーマ内でテストすると、テーマのルートが期待どおりにコアのルートをオーバーライドして動作します。
もう少し情報を見せていただけますか？ルートはどこで定義していますか？インスペクターはどのようになっていますか？
「いいね！」 3
チャーリー様
ご確認ありがとうございます
scss/custom-variables.scss に追加して common.scss にインポートしてみました。また、直接 common.scss に追加も試しました。
管理画面で作成した他のコンポーネントがテーマに割り当てられていない場合は機能することに気づきました。管理画面でコンポーネントを作成し、共通セクションに CSS を追加すると、コアのルート変数をオーバーライドしてくれません。
テーマにコンポーネントがない場合、またはコンポーネントの共通 / CSS が空の場合は機能します。
共通 / CSS を持つコンポーネントを作成し、テーマにアクティブ化した場合。
機能しません。
d-default-border-radius と d-select-body-border-radius はカスタムです。
よろしくお願いいたします
「いいね！」 3
なるほど。非常に興味深いです。分かりやすい手順をありがとうございます。
何ができるか見てみます。現時点では、あなたがすでに使用している !important 以外の別の解決策があるかどうか懐疑的ですが、これがどのように機能しているのかを知ることは良いでしょう。
「いいね！」 2
再現できます…少し奇妙です。
リモートテーマがあり、common.scss には次のものが含まれています。
:root {
--d-border-radius: 100px;
}
これは機能し、ボタンやその他の要素が丸みを帯びます。
CSS を含む ローカル テーマコンポーネントを追加すると、問題が発生します。次の内容のみを含むローカルテーマコンポーネントを作成しました。
body {
background: red;
}
背景は赤くなりますが、border-radius は消えます。
同じコンポーネントはリモートでは正常に機能します。赤色の背景と丸みを帯びた境界の両方が得られます。
「いいね！」 5
variables.scss をすべてのテーマ CSS ファイルにマジックインジェクションしていることが原因だと思います。現在、variables.scss には次のコードがあります。
:root {
--topic-body-width: #{$topic-body-width};
--topic-body-width-padding: #{$topic-body-width-padding};
--topic-avatar-width: #{$topic-avatar-width};
--d-border-radius: initial;
--d-nav-pill-border-radius: var(--d-border-radius);
--d-button-border-radius: var(--d-border-radius);
--d-input-border-radius: var(--d-border-radius);
}
この SCSS ファイルをすべてのテーマおよびプラグインの SCSS ファイルにインジェクションするため、これが繰り返し出力されます。
現在、これをオーバーライドする唯一の方法は、最後のテーマスタイルシートにオーバーライドを追加することです。そうすると、最後に出力されます。
この :root 宣言を、コアの variables.scss の外部のグローバルな場所に移動する必要があると思います。
「いいね！」 6
なるほど！ありがとうございます。なぜそれらが繰り返されるのかを理解していませんでしたが、完全に無視していました。\n\nこれらを別のファイルに移動したので、繰り返されなくなりました。問題が解決したことを確認しました。\n\nDEV: relocate `:root` CSS custom properties by awesomerobot · Pull Request #19389 · discourse/discourse · GitHub
「いいね！」 6