テーマSCSSを複数のファイルに分割する

ドキュメント 開発者ガイド
1

テーマとテーマコンポーネントは着実に強力になっており、開発者の意欲もますます高まっています。開発者の作業を容易にするため、テーマはSCSSを複数のファイルに分割できるようになりました。

新しいテーマをテーマCLIで作成する場合、またはテーマをGitHubで共有する場合、単にscssという名前の新しいフォルダーを作成します。その中に.scssファイルを好きなフォルダー構造で配置すると、すべてのファイルがテーマの共通/デスクトップ/モバイルの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フォルダからインポートできません。