如何在Nuxt 3应用中将Vuetify集成到Storybook中？

问题背景 #

已安装Vuetify ^3.1.6并在Nuxt应用中正常使用，通过npx -p @storybook/cli sb init --type vue3安装Storybook后，配置storybook-addon-vuetify3时出现PostCSS处理Vuetify CSS失败的错误：

ERROR in ./node_modules/vuetify/dist/vuetify.min.css (./node_modules/css-loader/dist/cjs.js??ref--10-1!./node_modules/postcss-loader/dist/cjs.js??ref--10-2!./node_modules/vuetify/dist/vuetify.min.css) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):

解决方案 #

1. 完善Storybook中Vuetify的初始化配置 #

修改.storybook/preview.js，手动创建Vuetify实例并传入装饰器：

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/dist/vuetify.min.css'
import { withVuetify } from 'storybook-addon-vuetify3/dist/decorators'

// 创建Vuetify实例，可同步Nuxt中的自定义配置
const vuetify = createVuetify({
  components,
  directives,
})

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/
    }
  }
}

export const decorators = [
  withVuetify({ vuetify })
]

2. 配置PostCSS兼容规则 #

在项目根目录创建postcss.config.js，确保PostCSS能正确解析Vuetify的CSS：

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    autoprefixer: {}
  }
}

3. 调整Storybook的Webpack配置 #

修改.storybook/main.js，添加Webpack规则适配Vuetify CSS处理：

module.exports = {
  stories: ['../components/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-addon-vuetify3'
  ],
  framework: {
    vue3: {
      builder: 'webpack5'
    }
  },
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader'],
      include: /node_modules\/vuetify/
    })
    return config
  }
}

4. 清理依赖缓存并重装 #

删除旧依赖缓存后重新安装，避免版本冲突：

rm -rf node_modules package-lock.json
npm install

内容的提问来源于stack exchange，提问作者Fru Boris