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

ちょっとした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>`,
  }));

最後に

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