【HTMLアプリ作成術】SvelteアプリをNES.cssのSassからスタイリングを試してみる
※ 当ページには【広告/PR】を含む場合があります。
2022/03/06
前の回ではSvelteアプリの外部Sassファイルをどう扱うのかを簡単に解説していました。
他方、Typed.cssの回でやったように、scssファイルを直接的に読み込むようなケースの他に、npmインストールしてからnode_modules以下のライブラリとして利用するタイプのプロジェクトがあります。
今回はnpmパッケージインストールありの場合でSassスタイルファイルをSvelteで利用する方法を紹介します。
NES.css(Node版)のインストール作業
なんだか訳アリのようで
この本家をモダンなNode.js v12以上にパッケージインストールすると、どうやらランタイムか何かのライブラリが古いと怒られてしまい、インストールがコケてしまいます。
開発者内部で何は起こったのか知る由もないのですが、代わりに
$ yarn add @16bits/nes.css -S
#OR
$ yarn add nes.css.14x -S
Rollup側の調整
SvelteアプリでNode版のNES.cssを使うのは少々骨が折れるかも知れません。
常にネットに接続された環境で使う場合には、Node版に拘る必要もなく、CDNでNES.cssを読み込めばそれで済む話なのですが...。
このブログでは、Svelteアプリがオフラインである場合でも変わらずに動作するようにRollupの設定を調整します。
おそらく既に以前のブログでもインストールしましたが、Rollupプラグインの
svelte-preprocess $ yarn add svelte-preprocess -D
このSvelte用のプリプロセッサから、
node_modules次に
rollup.config.js import sveltePreprocess from 'svelte-preprocess';
//...
svelte({
//...
preprocess: sveltePreprocess({
postcss: true,
scss: { includePaths: ['src', 'node_modules'] },
})
}),
//...
更に次のステップとして、node_modules内のスタイルを読み込めるように
App.svelte //...
<style lang="scss" global>
@import '../node_modules/...[cssファイルのパス].../hoge.min';
@import '../node_modules/...[scssファイルのパス].../piyo.scss';
</style>
//...
ここで少し間際らしいルールがあり、App.svelteから見た相対パスなので
../node_modules/・・・また、インポート先がCSSファイルなら
.css一方で、SCSSファイルを読み込むなら
.scssちょっと分かりにくいルールですが、これでSvelteアプリがnode_modules内のスタイルを読み込めるようになり、バンドルしてくれるようになります。
Svelteで独自フォントを使う
NES.cssは8bitレトロ感のあるフォントまではサポートしていないので、それっぽいフォントを頂いてきて利用する必要があります。
公式では、
の２つのサイトが紹介されています。
どちらもフリーで利用ライセンスも厳しくはないのですが、「Nu もち」はダウンロードの際にユーザー登録する手間があります。
ここでは、「美咲フォント」を利用し、Svelteアプリに埋め込んでみることにします。
@font-faceによるユーザー独自フォントの設定
グーグルフォントなどを利用する際に良く見かけるテクニックですが、ブラウザに対応していないフォントタイプを独自にcssファイルに埋め込んで利用する際には
@font-faceの使い方の概要は以下のサイトで解説されている方などが分かりやすいと思います。
Svelteでも外部フォントを使う際にも、基本的には@font-faceを定義するのですが、フォントファイルのプロジェクトの置き場所に注意します。
まずは「美咲フォント」のサイトから、TrueType形式のフォントを頂いて参ります。
ダウンロードしたzipフォルダを解凍すると、
misaki_gothic.ttfmisaki_gothic_2nd.ttfmisaki_mincho.ttfpublicフォントをpublicフォルダに移動した後のSvelteプロジェクトはおおよそ以下のように配置されているとOKです。
$ tree -I node_modules
.
├── public
│ ├── index.html
│ ├── misaki_gothic.ttf
│ ├── misaki_gothic_2nd.ttf
│ └── misaki_mincho.ttf
├── rollup.config.js
├── src
│ ├── App.svelte
│ ├── main.js
│ └── styles
│ └── global.scss
└── package.json
なお、フォントファイルはサイズ的に重い傾向にあるので、あれもこれもと欲張らずに利用したいフォントだけに絞ってからpublicで使うようにしたほうが良いでしょう。
コードから@font-faceを呼び出す
独自に定義した
@font-faceここでは、後者のCSSファイル側から定義する方法を採用します。
global.scss @font-face {
font-family: 'Misaki_Gothic';
font-style: normal;
font-weight: 500;
src: url('/misaki_gothic.ttf') format('truetype');
}
//...以下略
これで先程
publicmisaki_gothic.ttfMisaki_Gothic重要なポイントとして、Svelteのリソースファイルは
publicurl(...)/publicとりあえずこれで一通りNES.cssがSvelteアプリとして動くようになったと思います。
これでレトロ感あるHTML要素が簡単に生成することが出来るようになりました。
なお、一部アイコン画像に
まとめ
今回は、npmパッケージで提供されているcssスタイルのプロジェクトをSvelteでどのようにビルド出来るようにするかの手順を解説してみました。
インターネットに接続されている状態でWEBページを提供するのなら、必ずしもnpmパッケージインストールする必要はなく、既にビルドされて公開されているCDNライブラリをHTMLファイルに読み込めばそれで済むとは思います。
Svelteアプリを実行ファイル化する際には今回のテクニックがお役に立つと思います。