18 vue에 storybook 기능 추가하기

source: categories/study/vue-experiance/vue-experiance_9-08.md

18. vue에 storybook 기능 추가하기

• storybook 절대 경로 지정 방법
• Storybook with absolute paths
• storybook absolute path 설정
• 상대경로, 절대경로
• webpack configuration

Vue 내장 절대경로 @ <- storybook 적용 이슈 및 font-face 경로 인식 이슈 해결

strobook/main.js

const path = require('path');
module.exports = {
  'stories': [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  'addons': [
    '@storybook/addon-links',
    '@storybook/addon-essentials'
  ],
  webpackFinal: async (config) => {
    // Make whatever fine-grained changes you need
    config.module.rules.push(
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'string-replace-loader',
            options: {
              search: 'assets',
              replace: '..',
              flags: 'g'
            }
          },
          'sass-loader',
        ],
        include: path.resolve(__dirname, '../'),
      },
    );
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../src'),
    };
    return config;
  }
};