Lightning Design Systemのダウンロード方法の1つに『npm install』を利用する方法が用意されています。
$ npm install @salesforce-ux/design-system --save
この方法でダウンロードすると『.node_module』フォルダの中にダウンロードされるのですが、こうやってダウンロードした場合、linkタグでの読み込みがうまくいかないしどうやって利用すればいいんだろうと思っていました。
その問題の解決方法がこちらで紹介されていました。
npm installコマンドでダウンロードした後、sassをつかって@importで取り込めばよかったみたいです。
@import "./node_modules/@salesforce-ux/design-system/scss/index.scss";
sassはどうやって利用すればいいんだろうという問題もあったのですが、これはgulpをつかえば解決できました。
@importしたあとSassをコンパイルしてcssファイルに変換すると次のようになります。
linkタグではこのcssファイルの方を読みこめば大丈夫です。
<link rel="stylesheet" href="stylesheets/css/style.css">
この方法のいいところはsassをつかってSLDS側に用意された変数をカスタマイズしたりできることだと思います。また読み込むCSSファイルが1つにまとまりスッキリします。
CSSの読み込みはこれでうまく行きましたが、もう一つ問題が残りました。SLDSディレクトリにあるassetsフォルダ内のアイコンなどがこのままでは読み込めません。(.node_moduleからパスを指定してもダメでした。)
まだ解決できていないのですが、gulpをつかってassetsの内容をコピーすればうまくいくんじゃないかと思います。このコピー方法についても参考になるサイトが見つかりました。
これでうまくいったら追記しようと思います。現時点でのサンプルはこちらです。
追記
Gulpをつかったファイルのコピーですがうまくいきました。
gulp.task("slds-copy", function() {
return gulp.src("./node_modules/@salesforce-ux/design-system/assets/**/*")
.pipe(gulp.dest( './public/lib/SLDS/assets/' ) );
});
このタスクを実行するとnode_module内のSLDSフォルダを任意の場所にコピーできます。
補足ですが、サンプルコードを見てて気になったのが次のように『/**/*』という宣言です。
assets/**/*
これはどういう意味だろうと調べてみると次のサイトに解説がありました。
特定のディレクトリ以下全てのファイルとディレクトリを扱う場合は上記のように指定すればいいみたいです。確かに『assets/*』という指定をしたとき、フォルダはコピーされたのですが、フォルダ内のファイルはコピーされませんでした。
SLDSファイル一式の利用準備はできたので後は次のように宣言すれば普通に利用できます。
<svg aria-hidden="true" class="slds-button__icon"> <use xlink:href="./vendor/SLDS/assets/icons/utility-sprite/svg/symbols.svg#home"></use> </svg>
これでアイコンは表示できるようになりました。ですがまだうまくいっていない箇所があります。フォントの読み込みです。
Salesforce外で利用すると発生するエラーなのですが、Sassをつかったカスタマイズで解決できました。一番上のリンク先で紹介されていた方法ですが、次のような感じで『$static-font-path』変数の値を変更すれば解決します。
$static-font-path: "../../vendor/SLDS/assets/fonts/webfonts"; @import "./node_modules/@salesforce-ux/design-system/scss/index.scss";
これですべてのエラーがなくなり、気持よく利用できるようになりました。
Gulpタスクの一括実行について
おまけですが、今回GulpのタスクがsassのコンパイルとSLDSファイル一式をコピーする2つになりました。複数タスクの一括実行はできるのかなと確認したところ次のようにタスクを用意すればいいみたいです。
gulp.task('default', ['sass','slds-copy']);※並列実行されるそうです。
