Nuxt 모듈을 Storybook으로 가져옵니다.

Nuxt 모듈을 Storybook으로 가져옵니다.

저는 Nuxt 프로젝트에서 우리의 컴포넌트로 스토리북을 만들려고 합니다.지금까지 컴포넌트를 확인했습니다만, 모두 1개 이상의 모듈을 사용하고 있기 때문에 Import 방법을 찾을 수 없습니다.내 몸부림엔 혼자가 아닌 것 같아
(https://forum.vuejs.org/t/nuxt-js-and-storybook/26239,
https://github.com/derekshull/nuxt-starter-kit-v2/issues/1),
누군가 해결책을 찾았으면 좋겠어요

.storybook/webpack.config.disc:

const path = require("@storybook\vue\dist\server\config\defaults\webpack.config.js");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, "../")
      }
    ]
  }
};

.storybook/config.disc:

import { configure } from '@storybook/vue';
import Vue from 'vue';

const components = require.context('../components', true, /\.vue$/)
const stories = require.context('../components/stories', true, /.stories.js$/)

components.keys().forEach(filename => {
  const [, componentName] = filename.match(/([\w-]+)(.vue)/)
  Vue.component(componentName, components(filename).default)
})

function loadStories() {
  stories.keys().forEach((filename) => req(filename))
};


configure(loadStories, module);

저도 같은 문제가 있었는데 해결책을 찾기가 너무 어려워서 결국 찾았어요.

.storybook/webpack.config.js는 다음과 같습니다.

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.scss$/,
        use: [
            'vue-style-loader',
            'sass-loader',
            {
                loader: 'css-loader',
                options: {
                    modules: true,
                    modules: {
                        localIdentName: '[hash:base64:6]'
                    },  
                },
            },
        ],
    });
    return config;
}

다음 자료가 도움이 되었습니다.

https://vue-loader.vuejs.org/guide/css-modules.html#using-with-pre-processors (2019년 11월 현재 일부 구식)

https://github.com/rails/webpacker/issues/2197

언급URL : https://stackoverflow.com/questions/52117692/get-nuxt-modules-into-storybook