noxi雑記

.NET、Angularまわりの小ネタブログ

WijmoのSCSSを使用する

Wijmo

Wijmo のビルドインなカスタムテーマに Material テーマがあります。カスタムテーマは 2019v3 までは css ファイルまたは LESS で提供されていましたが、 2020v1 にて SCSS に切り替わりました。私は LESS を SCSS に手動翻訳して Angular Material と組み合わせて使用しているのですがこれを SCSS ベースのものに差し替えるべく、試しに導入します。

環境

Angular CLI: 10.0.4
Node: 12.18.2
OS: win32 x64

Angular: 10.0.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.4
@angular-devkit/build-angular     0.1000.4
@angular-devkit/build-optimizer   0.1000.4
@angular-devkit/build-webpack     0.1000.4
@angular-devkit/core              10.0.4
@angular-devkit/schematics        10.0.4
@angular/cli                      10.0.4
@grapecity/wijmo.angular2.all     5.20202.699
@ngtools/webpack                  10.0.4
@schematics/angular               10.0.4
@schematics/update                0.1000.4
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Wijmo の SCSS の構成

まず初めに、 Wijmo の SCSS の構成を眺めていきます。
Wijmo の css / scss 関連ファイルは @grapecity/wijmo.styles パッケージに含まれています。ディレクトリとファイルはこのように配置されています。

├─misc
│  ├─_constants.scss
│  ├─_glyphs.scss
│  ├─_mixins.scss
│  └─_variables.scss
├─parts
├─themes
│  ├─material
│  ├─wijmo.theme.material.scss
│  └─wijmo.theme.material.vars.scss
├─wijmo.scss
└─wijmo-core.scss

misc ディレクトリには共通で使用するファイルが、 parts ディレクトリには Wijmo コンポーネントそれぞれのスタイル定義ファイルが、 themes にはテーマスタイル定義ファイルが含まれています。

Wijmo の SCSS を使用する上で重要なファイルは misc/_variables.scss と themes/wijmo.theme.material.vars.scss の2つです。 misc/_variables.scss には各コンポーネントに使用される変数定義、 themes/wijmo.theme.material.vars.scss には Material テーマの変数定義が含まれます。この2つ以外のファイルは各コンポーネントのスタイル定義ファイル、またはスタイル定義をまとめてインポートしているファイルです。 wijmo-core.scss は Wijmo 標準コンポーネントのスタイル全てをインポートし、 wijmo.scss は wijmo-core.scss に加えて MultiRow などの Enterprise コンポーネントのスタイルもインポートします。

Wijmo の SCSS を使用する

続いて、実際に Wijmo の SCSS を導入します。 Wijmo のスタイルは全て mixin ではなくインポートで直接追加される方式のため、使用方法はとても簡単で、以下の2つのステップになります。

  1. 使用する SCSS ファイルを 1つだけ インポートする
  2. 1のインポート文の直前にデフォルト値を上書きする変数を定義する

テーマが適応されていない Wijmo のスタイルを読み込む

// @grapecity/wijmo.styles/wijmo.scss 読み込み
@import "~@grapecity/wijmo.styles/wijmo";

一切カスタマイズしない場合はこの1行を追加するだけで Wijmo のスタイルが追加されます。背景色を変更する場合はこの行の上に変数を追加します。

// Wijmoの変数更新
$wj-bkg: rgb(250, 250, 250);

// @grapecity/wijmo.styles/wijmo.scss 読み込み
@import "~@grapecity/wijmo.styles/wijmo";

Material テーマを使用する場合、 Material のプライマリーカラーとアクセントカラーの2変数を --mdl-primary --mdl-accent に定義します。

// Wijmoの変数更新
$wj-bkg: rgb(250, 250, 250);

// Wijmo Material
:root {
  --mdl-primary: 10, 10, 10;
  --mdl-accent: 20, 20, 20;
}

// Wijmo Materialテーマ読み込み
@import "~@grapecity/wijmo.styles/themes/wijmo.theme.material.vars";

終わりに

Wijmo の Material SCSS 欲しいなぁとは思っていたのでとても嬉しいです。しかしながら SCSS グローバル汚染が激しいのが残念です。可能であれば @import で勝手に追加されてしまうのでは無く、 @use と mixin でスコープを意識しつつ組み込めるようになるとより嬉しいです。また 2019v3 と比較して Material のスタイル定義が大分減った気がしますが互換性どうなんでしょうか。