SCSS 的 `@import` 如何工作？

您好，我不想用多个主题来垃圾邮件论坛，所以我作为 Discourse 论坛用户/会员有 4 个主要问题：

<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://forums.mysite.me/uploads/default/original/1X/9c81453y45yh45ha81cedd21d3cf20.png" />
<meta name="twitter:url" content="https://forums.mysite.me/" />
<meta name="twitter:title" content="SiteTitle" />
<meta name="twitter:description" content="Site Description Is Here" />

在 Remove All Traces of Social Media On My Website? 中再次提问

2) @import 在 SCSS 中是如何工作的？在定制 Air 主题 时，我注意到 GitHub 页面上的 CSS 是：

@import "showcased-categories";
@import "chat-desktop";
@import "sidebar-desktop";

所以，我尝试创建一个自己的主题并将它包含在我的主题的“编辑 CSS/HTML”->“桌面”部分，但当我保存该条目时，我收到了：

css1018×283 12.2 KB

3) 如何让论坛在我的 VPS 服务器重启后自动重新启动？服务器是 Ubuntu 22.04。在研究时，我发现了这个回复 在这里的论坛上，但我按照它说的做了，我一定是眼花了，因为我没有像评论中建议的那样在安装页面上看到如何做到这一点。

4) 如何将我的整个论坛向下移动一些？在桌面上看起来不错，但在移动设备上，它看起来就像顶部的评论一样（因为新用户似乎每帖只能添加 1 张截图），圆角触及了顶部的栏……

image400×200 19.9 KB

我尝试在主题 CSS 的 Head 部分添加一个换行符（<br>），但这移动了所有内容，包括顶部的导航栏，而我希望它保持在顶部。

我想这就是我目前所有的问题。谢谢。

关于上面第 4 点，这是我提到的截图：

Screenshot_20240325-160753_Firefox400×200 19.9 KB

你好，欢迎来到 Meta

1. 我没有问题的答案。不过，我也许会弄错。我不认为这些 OpenGraph meta 和 facebook_app_id 在这里存在隐私问题。 希望其他人能给出更好的见解。

2. 你没有创建一个远程主题。它存在于一个 GitHub 存储库中。你可以创建自己的文件，例如将 CSS 分成多个文件放在 scss 目录中。然后，@import 会自动引用该目录。

   当你手动在管理员中创建主题时，你不能这样做。

   如果你想自定义远程主题，可以创建一个主题组件，将其附加到 Air 主题，然后添加任何你想要的 CSS。这不需要导入这些文件。但是，如果你需要为你的自定义（例如 discourse-air/scss/sidebar-desktop.scss at main · discourse/discourse-air · GitHub SCSS 函数/混合宏，你可能需要这样做。

   有关主题的更多信息：Developing Discourse Themes & Theme Components

3. 正如 Falco 所说，默认情况下，如果你遵循标准安装，Docker 总是会在重启时启动。没有说明可以查找，因为这是默认行为。你能确认你的论坛在重启时没有启动吗？

4. 首先，在启用安全模式的情况下，所有内容是否都显示正常？只是为了确保这与任何自定义设置无关。这将是找出问题的第一步。

感谢您的回复。关于第 4 点，我猜想这是一个 CSS 问题或其他问题，因此我不确定如何添加间隙才能让移动网站看起来不那么糟糕。启用安全模式后，它仍然会发生（第一个选项未选中）。

关于第 1 点，它们可能不算“隐私问题”，但我只是不希望在任何地方提及社交媒体。

#2：啊，好的，真有趣……我大约 5 小时前编辑一个组件时就是这样做的，但不知道主题也是这样工作的。我马上试试。

嗯……我的 Docker 在我的 VPS 启动后没有自动启动，真奇怪。

嗯。如果更多人走这条路，论坛就会充斥着无法使用的帖子标题。

@Question42，最好为每个问题创建一个主题。这不仅能使主题标题更相关，还能让人们更容易参与讨论，并且对将来搜索类似问题的人来说也更清晰。

快速评论 #2 点：
我 fork 了 Air 主题，自己做了修改，上传到自己的仓库，然后在管理面板的主题部分用 GitHub 链接安装了它……但现在我无法访问 CSS/HTML，因为它现在是一个非本地主题。我该如何解决这个问题？或者我必须使用你提到的组件方法吗？

导入的 GitHub 主题无法编辑本地 CSS/HTML 吗？因为至少在本地，我可以在管理面板中轻松编辑 CSS/HTML，只是不能做 @import 的事情。但现在我做了你提到的远程方法，却无法编辑主题来添加 @import 代码，而这正是我的目的。

关于 #4：
您可以尝试为 .list-controls 类添加上边距。

// 在移动 CSS 中
.list-controls {
  margin-top: 1rem;
}

image332×387 13 KB

所以，在我的 mobile.scss 文件中，我唯一提到的 .list-controls 是：

.categories-list .list-controls {
  background: var(--secondary);
  padding: 0.5em;
  border-radius: 8px;
}

.list-controls .nav-pills {
  li.navigation-toggle {
    border-radius: 8px;
    border: none;
    background-color: var(--secondary);
    a:hover,
    a:focus {
      color: var(--primary);
      background-color: var(--secondary);
    }
  }

我应该把你的代码放在哪一个里面？

您可以将其放在第一个选择器中。
或者另一个选项是这部分：

.list-controls .nav-pills {
  li.navigation-toggle {
    border-radius: 8px;
    border: none;
    background-color: var(--secondary);
    a:hover,
    a:focus {
      color: var(--primary);
      background-color: var(--secondary);
    }
  }
}

可以重写为：

.list-controls {

  .nav-pills {
    li.navigation-toggle {
      border-radius: 8px;
      border: none;
      background-color: var(--secondary);
      a:hover,
      a:focus {
        color: var(--primary);
        background-color: var(--secondary);
      }
    }
  }
}

然后，您可以在 .nav-pills 部分之前放置仅影响 .list-controls 的新声明。

所以我可以添加

.list-controls {
  margin-top: 1rem;
}

使整体看起来像这样：

.list-controls {
  margin-top: 1rem;
  
  .nav-pills {
    li.navigation-toggle {
      border-radius: 8px;
      border: none;
      background-color: var(--secondary);
      a:hover,
      a:focus {
        color: var(--primary);
        background-color: var(--secondary);
      }
    }
  }

没错！不过看起来结尾还需要一个 }。

所以，这是它在手机上给我的：

Screenshot_20240325-184747_Firefox1073×793 87 KB

不幸的是，它使顶部/回复/活动栏/区域不再接触帖子，“最新”选项卡现在接触顶部。我们能否让顶部/回复/活动区域仍然接触帖子区域，但“最新”下拉框不接触顶部栏？

尽管它是因为弄乱了，“最新”区域看起来与主题区域合并得很好，如原始屏幕截图所示：

98e4a9a087bd8bd4155fcf5fcf4ecfb4aa778378400×200 19.9 KB

编辑：哦，天哪……让朋友在他们的手机（iPhone 13）上检查了网站，网站在他们的手机上看起来毁了，哈哈……呃 但在我的手机上看起来“还好”（上面的截图，减去我想要修复的部分）。看起来他们的手机上的普通移动视图还可以，但在手机上使用桌面模式会让一切变得一团糟。

嗯，很难确定还有哪些其他样式正在影响您的主题。如果您还没有看过，我建议您查看本指南，特别是其中介绍如何使用浏览器的检查器（在开发者工具中——Chrome 中按 F12 键访问）的部分。它允许您查看应用于每个元素的样式，并打开和关闭它们以实时查看差异。

由于这与移动视图相关，您可以在大多数浏览器中从桌面模拟移动设备。这是 Chrome 中按钮的外观：

image310×123 6.24 KB

这似乎是意料之中的吧？桌面模式其实并不是为移动设备设计的。