vue3-ts-vuetify-sb/.storybook/main.js

Template for Vue 3, TypeScript, Vuetify and Storybook

const path = require('path');
const { VuetifyPlugin } = require('webpack-plugin-vuetify');

module.exports = {
    "stories": [
        "../src/**/*.stories.mdx",
        "../src/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    "addons": [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/addon-interactions"
    ],
    "framework": "@storybook/vue3",
    "core": {
        "builder": 'webpack5',
    },
    webpackFinal: async (config, { configType }) => {
        // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
        // You can change the configuration based on that.
        // 'PRODUCTION' is used when building the static version of storybook.

        // Make whatever fine-grained changes you need
        config.module.rules.push({
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            include: path.resolve(__dirname, '../'),
        });

        config.plugins.push(new VuetifyPlugin({ autoImport: true }));
        
        // Return the altered config
        return config;
    }
};