将 Nuxt 模块放入 Storybook

Posted 2023-02-19

【中文标题】将 Nuxt 模块放入 Storybook

【英文标题】：Get Nuxt modules into Storybook

【发布时间】：2019-02-06 14:50:37

【问题描述】：

我尝试使用 Nuxt 项目中的组件制作故事书。到目前为止，我看到了组件，但它们都至少使用一个模块，我找不到导入它们的方法。我似乎并不孤单(https://forum.vuejs.org/t/nuxt-js-and-storybook/26239,https://github.com/derekshull/nuxt-starter-kit-v2/issues/1), 但我希望有人找到解决方案。 .storybook/webpack.config.js：

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.js：

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);

【参考方案1】：

我遇到了同样的问题，但很难找到解决方案，我终于找到了。

您的 .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

【讨论】：

这不起作用。你仍然会得到这样的错误：确保“选项”是字符串或字符串数​​组，文件路径有效。