我的 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。请注意,我已禁用了两个主题组件:一个是自定义样式组件(您可以重新启用),另一个是 discourse-theme-category-homepage,该组件需要在上游更新后才能启用。更多详情请参阅 Enhanced category-box display component - #7 by pmusaraj

5 个赞

谢谢!样式表现在已正确加载,但 SCSS 颜色变量 似乎并未继承我的主题配色方案。例如,$secondary 返回的是其默认值 #ffffff,而不是 #282c34。这是否是 e8b8272 引入的另一个回归问题?

2 个赞

是的,这是另一个回归问题。修复起来有点棘手……对于绝大多数颜色变量,主题组件应使用 CSS 自定义属性。您可以参考这篇指南 https://meta.discourse.org/t/updating-themes-and-plugins-to-support-automatic-dark-mode/161595,了解如何在主题组件中通过特殊的 color_definitions.scss 文件添加自定义颜色变体的概述和示例。

请告诉我进展如何!

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 个赞

正准备试试这个,结果 Discourse 就挂了,显示“支撑此讨论论坛的软件遇到了意外问题”,哈哈。

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 个赞

是的,我已经提交了一个 PR 来解决导入问题,预计明天会合并。

3 个赞

感谢您的帮助!PR 已合并,我的实例也已更新,我现在可以将样式表导入到 color_definitions.scss 中,但这个问题又出现了:

这次,color_definitions.scss 中的变量也受到了影响。

1 个赞

是否可以在不继承父主题 SCSS 变量的情况下实现您想要做的操作?这是一个非常特定的使用场景,我宁愿不在核心代码中添加这种复杂性。

1 个赞

这当然是可行的,只是不太方便,因为每个主题都需要编写数百行样板 SCSS 代码(并且需要构建系统来在所有主题间共享变量),而这些在一周前还并非必需。话虽如此,为了避免未来 Discourse 构建流程重构时出现问题,最好还是现在就这样做。我会去处理。谢谢!

1 个赞

如果本指南已不再受支持,或许应该对其进行修订或删除。

2 个赞

是的,那份指南确实有点过时了。不过,导致你遇到问题的原因并非核心变量,而是某个组件中的 SCSS 颜色未继承主题的色彩方案。(尽管如此,我会通读该指南并对其进行更新。)

补充一点背景:我们在 2020 年 8 月至 9 月期间改用 CSS 自定义属性来处理颜色。做出这一变更的主要原因是,我们希望以一种轻量且高效的方式支持自动深色模式色彩方案切换。主题包含 CSS 和 JS,因此无法快速切换;但使用 CSS 自定义属性,色彩方案可以在不刷新页面的情况下即时切换。

我看到你的站点中有 4 个主题,每个主题对应一种色彩方案,并且有一个跨主题共享的组件用于处理共享样式。你完全可以通过一个主主题(包含所有共享样式)和 4 种用户可选的色彩方案来实现几乎相同的效果。你只需将主主题中 color_definitions.scss 文件内的所有颜色计算逻辑迁移过去即可。这是完全可行的,我明天会尽量找时间尝试一下。

那当然是最理想的。但我之所以采用目前的设置,是因为多种配色方案无法满足我的需求。某些配色方案会导致像 --primary-low 这样的自动生成的变量颜色效果不佳。仅仅重新定义该变量可能适用于一种配色方案,但无法适用于另一种。如果我们基于 $primary 重新定义它,或者根据配色方案的 ID 或名称进行条件判断,是有可能找到更通用的解决方案的。但如果没有这些,就必须使用多个主题,这样我就需要为每个主题单独维护一个 color_definitions.scss 文件(这正是我想避免的重复工作)。难道还有更好的方案是我遗漏的吗?

此主题已在 27 天后自动关闭,不再允许新回复。