ちょっとした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>`,
}));
最後に
めちゃ便利ですね〜〜〜〜〜〜〜〜!