カテゴリー
Storybook＆SvelteでTypescript/Sassを使う場合の注意点
※ 当ページには【広告/PR】を含む場合があります。
2024/07/12
StorybookでTypescriptを使う
.tsStorybookのvite-buildersでViteの振る舞いを独自に制御する方法
@storybook/builder-vite
yarn add -D @storybook/builder-vite
viteFinal
import { mergeConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
export default {
//...中略
core: {
builder: '@storybook/builder-vite', //👈ビルダーを有効化
},
//...中略
//👇vite.config.jsのカスタマイズ
async viteFinal(config) {
return mergeConfig(config, {
plugins: [svelte()],
});
}
}
viteFinalvite.config.js
export default {
//...中略
core: {
//👇独自のvite.config.jsを外部ファイルから指定する
builder: {
name: '@storybook/builder-vite',
options: {
viteConfigPath: './customVite.config.js',
},
},
},
//...中略
}
Storybook/Viteのバージョンによってはモジュールの読み込みに失敗する
@sveltejs/vite-plugin-svelte
@storybook/cli v7.6.20
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in ./node_modules/@sveltejs/vite-plugin-svelte/package.json
at exportsNotFound (node:internal/modules/esm/resolve:294:10)
at packageExportsResolve (node:internal/modules/esm/resolve:584:13)
at resolveExports (node:internal/modules/cjs/loader:591:36)
at Module._findPath (node:internal/modules/cjs/loader:668:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1130:27)
at Module._resolveFilename (./node_modules/esbuild-register/dist/node.js:4799:36)
at Module._load (node:internal/modules/cjs/loader:985:27)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at require (node:internal/modules/helpers:176:18)
at Object.<anonymous> (./.storybook/main.js:2:24)
@sveltejs/vite-plugin-svelteexports
<script lang="ts">
export let label: any;
</script>
...
[vite] Internal server error: /usr/src/app/storybook/stories/components/Button/Button.svelte:2:20 Unexpected token
Plugin: vite-plugin-svelte
File: /usr/src/app/storybook/stories/components/Button/Button.svelte:2:20
1 | <script lang="ts">
2 | export let label: any;
^
3 | </script>
4 |
index.ts
export function toggle(e: any) {
const items = [...document.getElementsByClassName('hoge')];
console.log(items);
}
<script>
//👇tsコードから読み込んだ関数
import {toggle} from './index';
</script>
<ul>
<li>
<span class="hoge" on:click={toggle}>Hoge</span>
</li>
</ul>
StorybookでSassを使う
Sassをインストール
$ yarn add -D sass postcss autoprefixer
style.scss
.hoge {
cursor: pointer;
user-select: none;
&::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
}
<script>
//👇scssコードから読み込んだスタイル
import './style.scss';
</script>
<ul>
<li>
<span class="hoge">Hoge</span>
</li>
</ul>
「<style lang="scss">」では動かない
@sveltejs/vite-plugin-sveltestyle
<style lang="scss">
.hoge {
cursor: pointer;
user-select: none;
&::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
}
</style>
<ul>
<li>
<span class="hoge">Hoge</span>
</li>
</ul>
stylescriptまとめ
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー