将主题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

Is that still supposed to work? My default scss files (common/desktop/mobile) don’t work when I add an @import.

Or is there a new recommendation for splitting files?

8

This should still work. Can you share the precise @import statement you’re using, and the file structure of your stylesheets?

9

The theme setup has default file structure and I added scss/test.scss Then I state @import "test";

On the console (using discourse_theme watch) I get:
✘ Error in common scss: Error: File to import not found or unreadable: test. on line 1 of common.scss

10

Does your test.scss file have any content?

11

Just declared one variable (btw there’s a typo on the first code block above, declared with equals: $favourite-color = red;)

But just solved it. I set the minimum version in about.json as v2.3.0.beta8 and when I remove that, it works just fine. Never used that before, so not sure what’s wrong with the declaration.

1 个赞
12

Interesting! If you add the minimum version again, does it consistently break? If so, would you mind zipping up the broken theme and sharing it here? (or PMing it to me)

1 个赞
13

As said, I never set a min version before. So I just copied it above as v2.3.0.beta8. This breaks, but 2.3.0.beta8 works just fine.

14

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

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

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