Can't resolve '~storybook'

[sdailly]

Hello,

When i create preview.js file & inject this line import '~/.nuxt-storybook/storybook/preview.js' , i have this error :
ERROR in ./.nuxt-storybook/storybook/preview.js Module not found: Error: Can't resolve '~storybook' in

What is the target of ~storybook ? and why i have this error ?

Here my configuration :

// main?.
const path = require('path');

module.exports = {
    webpackFinal(config, options) {
        config.module.rules.map((rule) => {
            if (rule.test instanceof RegExp && rule.test.test('.scss')) {
                rule.use = [
                    ...rule.use,
                    {
                        loader: require.resolve('sass-resources-loader'),
                        options: {
                            resources: [
                                path.resolve(__dirname, '../assets/css/core/_global.scss'),
                                path.resolve(__dirname, '../assets/css/core/main.scss')
                            ]
                        }
                    }
                ]
                return rule;

            }
            return rule;
        });

        config.resolve.alias = {
            ...config.resolve.alias,
            '@': path.resolve(__dirname, '../')
        }
        return config;
    },
    stories: [
        '../components/**/*.stories.@(ts|js|mdx)',
        '../storybook/**/*.stories.@(ts|js|mdx)',
    ],
    addons: [
        '@storybook/addon-docs',
        '@storybook/preset-scss',

]
}

// preview.js
import Vue from 'vue';
import Color from '@/storybook/colors/Color.vue'
import '~/.nuxt-storybook/storybook/preview.js'

Vue.component('Color', Color);

Thanks for answers.
Have a good day.

[farnabaz]

Hey,
Could you provide reproduction project for this issue?
Without the reproduction project, we can't find out the reason

[sdailly]

Hey @farnabaz, you can see the project here : https://github.com/sdailly/storybook-nuxt
npm run storybook

Thanks.

[farnabaz]

You need to add config = options.nuxtStorybookConfig.webpackFinal(config, options); to the first line of webpackFinal function inside storybook/main.js.

Just a tip, you don't need to configure sass-resources-loader by yourself or @storybook/preset-scss. Using above both scss and '@nuxtjs/style-resources' will integrate to storybook.

Also, I uess you have missing mixins in your repo

[sdailly]

Thank for your answer @farnabaz !

You have resolved my problem ;)