将主题SCSS拆分为多个文件

文档 开发者指南
1

主题和主题组件正变得越来越强大，开发人员也越来越有雄心壮志。为了方便开发人员，主题现在可以将它们的 SCSS 分成多个文件。

当使用 主题 CLI 创建新主题，或在 GitHub 上 分享主题时，只需创建一个名为 scss 的新文件夹。用你的 .scss 文件填充它，遵循任何文件夹结构，所有文件都可以在主题的 common / desktop / mobile SCSS 部分中导入。

例如，如果你想让一个通用的变量可用于移动端和桌面端的 SCSS，你可以这样做：

scss/my-folder/variables.scss

$favourite-color = red;

desktop/desktop.scss

@import "my-folder/variables";
body {
  background-color: $favourite-color;
}

mobile/mobile.scss

@import "my-folder/variables";
body {
  color: $favourite-color;
}

此功能已在 v2.3.0.beta8 中添加，因此如果你需要与旧版本的 Discourse 保持向后兼容性，请不要立即使用这些功能。你可以使用 about.json 的 minimum_discourse_version 参数 来确保你的组件不会在早期版本上使用。

此文档受版本控制 - 在 GitHub 上 建议更改。

20 个赞
Breaking up common.scss into multiple files in components?
Discourse 2.3.0.beta9 Release Notes
Need help with theme component Github
Please support any theme/component. css+html can be customized
2

This is amazing @david! Nice work!

I can’t wait to give this a whirl.

8 个赞
3

This is a great! I can now remove my hack for getting around not being able to do this.

5 个赞
4

@david this is great, but unfortunately it doesn’t seem to work when the theme is a component. Not sure if that’s a known bug.

You can see it happen with this very simple theme: GitHub - LeoMcA/discourse-multi-scss-component

When converted to a stand-alone theme the background colour will be green, but when used as a component within another theme it doesn’t change the background colour at all.

5 个赞
6

Thanks @LeoMcA, you’re right - this wasn’t working in components. The issue should be fixed in

4 个赞
7

这应该还能用吗？我添加 @import 后，默认的 scss 文件（common/desktop/mobile）无法正常工作。

或者，现在是否有拆分文件的新建议？

8

这应该仍然有效。你能分享一下你正在使用的确切 @import 语句以及你的样式表文件结构吗？

9

主题设置包含默认的文件结构，我添加了 scss/test.scss，然后在其中声明了 @import "test";。

在控制台（使用 discourse_theme watch）中，我收到以下错误：
✘ 在 common scss 中出错：错误：找不到或无法读取要导入的文件：test。 位于 common.scss 的第 1 行

10

你的 test.scss 文件里有内容吗？

11

刚刚声明了一个变量（顺便提一下，上面的第一个代码块有个拼写错误，声明时使用了等号：$favourite-color = red;）。

不过问题已经解决了。我在 about.json 中将最低版本设置为 v2.3.0.beta8，一旦移除该设置，一切就正常了。我之前从未使用过这个功能，所以不确定声明部分出了什么问题。

1 个赞
12

有意思！如果你再次添加最低版本要求，问题是否始终复现？如果是的话，能否将出问题的主题打包成 ZIP 文件并在此分享（或通过私信发给我）？

1 个赞
13

如前所述，我此前从未设置过最低版本。因此，我直接将其复制为 v2.3.0.beta8。这会导致问题，但 2.3.0.beta8 则完全正常。

14

是否可以从 node_modules 包中使用 scss 文件？例如：

@import 'bootstrap/scss/bootstrap.scss';
@import '../node_modules/bootstrap/scss/bootstrap.scss';

在这两种情况下，我都无法从 /scss 文件夹导入。