テーマ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

まだ機能するはずですか？デフォルトの SCSS ファイル（common/desktop/mobile）は、@import を追加すると機能しなくなります。

あるいは、ファイルを分割するための新しい推奨方法はありますか？

8

これでも動作するはずです。現在使用している正確な @import 文と、スタイルシートのファイル構成を共有してもらえますか？

9

テーマのセットアップにはデフォルトのファイル構造があり、そこに scss/test.scss を追加しました。その後、@import "test"; と記述しました。

コンソール（discourse_theme watch を使用）では以下のようなエラーが表示されます：
✘ Error in common scss: Error: File to import not found or unreadable: test. on line 1 of common.scss

10

test.scss ファイルに内容が含まれていますか？

11

変数を1つ宣言しただけです（ちなみに、上記の最初のコードブロックにタイプミスがあります。等号で宣言されています：$favourite-color = red;）

ただし、解決しました。about.json で最小バージョンを v2.3.0.beta8 に設定しましたが、これを削除すると問題なく動作します。以前に使ったことがないので、宣言に何が間違っているのかはわかりません。

「いいね！」 1
12

面白いですね！最小バージョンを再度追加すると、常にエラーが発生しますか？もしそうであれば、問題が発生しているテーマを ZIP 圧縮してここに共有していただけますか？（または、私に PM で送ってください）

「いいね！」 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フォルダからインポートできません。