[vue.js] storybook absolute path 설정

Vue 자체에 절대경로 설정은 @로 내장되어있는데,

스토리 북에서 글로벌 .scss 파일을 지역 scss 파일에 include 혹은 다른 작업을 하기위해 아래와 같이 import 하는 경우

//지역 컴포넌트
@import '@/assets/common-stylesheets/index.scss'; //절대경로설정

.root-header{
  @include size(100%, 50px);  //include를 쓰려면 글로벌에서 mix인한 내용을 불러와야함
}

웹팩 에러가 나는 것을 볼 수 있다. (해당이슈는 스토리북 이슈에도 있으나, 개발진들이 답을 달아주지는 않은 상황)

상대경로는 작동하는데, 지역 scss 에서 import 할때마다 경로가 다르면 

나중에 유지보수 하기에 성가신 상황이 올 수도 있다.

뷰에서 해결할 수 있는 방법은 path에 alias를 주는 방법 밖에 없다.

먼저 .storybook 안에 있는 webpack.config.js 에다가 아래와 같이 코드를 입력해 준다.

//webpack.config.js

config.resolve.extensions.push(".scss");
  config.resolve.alias = {
    ...config.resolve.alias,
    "@": path.resolve(__dirname, "../src"),
  };

 

웹팩 파일을 보면 아래와 같다.

//webpack.config.js

const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');


module.exports = async ({ config, mode }) => {
  config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.less', '.scss', '.sass', '.html');
  config.module.rules.push({
    test: /\.ts$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true // used with ForkTsCheckerWebpackPlugin
        },
      },
    ],
  });
  
  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../'),
  });
  //추가된 부분
  config.resolve.extensions.push(".scss");
  config.resolve.alias = {
    ...config.resolve.alias,
    "@": path.resolve(__dirname, "../src"),
  };
  
  config.plugins.push(new ForkTsCheckerWebpackPlugin());

  return config;
}  

 

설정 후 yarn storybook 을하면 실행이 잘된다.

참고자료 : https://stackoverflow.com/questions/49748446/aliases-dont-seem-to-work-in-vue-storybook