#javascript
#vuejs
#vuex
#vue
#storybook

NuxtやVuejsとStorybookの組み合わせの際のグローバルアセットの読み込みを解決する

More than 1 year has passed since last update.

ちょっとしたtipsです。

グローバルSASS、SCSS、ビルド前のを読み込みたいですよね。

例えば、nuxtとかでstorybookを使う場合とか。


webpackの設定を追加

あなたの .storybook/webpack.config.js をこんな感じに。

path解決はめんどくさいと思いますが、良い感じに頑張ってください!笑

const path = require('path');

const rootPath = path.resolve(__dirname, '../')

// load the default config generator.
const genDefaultConfig = require('@storybook/vue/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
const config = genDefaultConfig(baseConfig, env);

config.resolve.alias['@'] = rootPath
config.resolve.alias['~'] = rootPath

return config;
};


コード例

.stories/index.js

import '!style-loader!css-loader!~/assets/main.scss'


実際のサンプルコード

.stories/index.js

import { storiesOf } from '@storybook/vue'

import VueInfoAddon from 'storybook-addon-vue-info'
import { withKnobs, text, number, boolean } from '@storybook/addon-knobs'
import { withNotes } from '@storybook/addon-notes'
import Status from '@/components/atoms/Status.vue'
import '!style-loader!css-loader!~/assets/main.scss'

storiesOf('Atoms', module)
.add('catarog', () => ({
components: {Status},
data() {
return { size: 18 }
},
template: `
<div style="display: flex; width: 300px; justify-content: space-between;">
<div style="width: 140px; height: 35px;">
<Status>Sample</Status>
</div>
<div style="width: 140px; height: 35px;">
<Status color="bisque" :size="size">Sample</Status>
</div>
</div>`,
}));


最後に

めちゃ便利ですね〜〜〜〜〜〜〜〜!