tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightning開発でのLightning Design System自動読み込み

Lightning Experienceスタイルを簡単に適用できるLightning Design Systemですが、ExperienceとS1Mobile上で動かすLightning Componentでは静的リソースから読み込まなくても自動で適用されるようになっています。

The Lightning Design System CSS is now automatically included for Lightning Components running in the Lightning Experience and Salesforce S1 mobile application (via app.css). It is no longer necessary to add a static resource for Lightning Components running within these environments.


Lightning Design Systemのサンプルコードをコピーして試してみました。
f:id:tyoshikawa1106:20160628175929p:plain


今までは『ltng:require』タグでSLDSの読み込みを行っていましたが、このタグを宣言せずに進めます。
f:id:tyoshikawa1106:20160628180051p:plain


このコンポーネントをアプリケーションビルダーでページに埋め込んでみると・・・
f:id:tyoshikawa1106:20160628180214p:plain


無事にSLDSのスタイルが適用されていました。


1つ気になっているところで、Lightning Design Systemのどのバージョンが適用されているのかなと思いました。おそらく最新バージョンが適用されていると思うのですが、1系と2系でけっこう違いがあったりするので、バージョンアップ時にちゃんと動くかの確認は必要になるかもしれません。


ちなみにこの自動読み込みですが、Lightningアプリケーションには適用されませんでした。
f:id:tyoshikawa1106:20160628180812p:plain