Quiero personalizar temas en Vuetify usando Storybook 6 y estoy usando @socheatsok78/storybook-addon-vuetify https://storybook.js.org/addons/@sochheatsok78/storybook-addon-vuetify
Hice exactamente lo que dice la documentación, pero el tema sigue sin funcionar. Quiero configurar vuetify con propiedades personalizadas y con mi propia paleta de colores.
preview.js
import '!style-loader!css-loader!sass-loader!./main.scss'; import { withVuetify, withThemeProvider, } from '@socheatsok78/storybook-addon-vuetify/dist/decorators'; import minifyTheme from 'minify-css-string'; export const globalTypes = { theme: { dark: false, options: { customProperties: true, minifyTheme, }, themes: { light: { primary: '#007BBF', secondary: '#008574', }, dark: { primary: '#f099aa', }, }, }, }; export const parameters = { actions: { argTypesRegex: '^on[AZ].*' }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, }; export const decorators = [withThemeProvider, withVuetify]; main.js
const path = require('path'); module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', '@storybook/addon-docs', '@storybook/addon-essentials', '@storybook/preset-scss', '@socheatsok78/storybook-addon-vuetify', ], webpackFinal: async (config) => { config.module.rules.push({ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader', { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, 'main.scss'), }, }, ], sideEffects: true, include: path.resolve(__dirname, '../'), }); return config; }, };Ok, arreglé el tema, puedes encontrar un tutorial sobre cómo hacer esto y con todo el código de trabajo a continuación. Encontré una gran explicación aquí:
https://morphatic.com/2020/09/30/configurando-storybook-6-para-vue-2-vuetify-2-3/
preview.html
import '!style-loader!css-loader!sass-loader!./main.scss'; import { withVuetify } from '@socheatsok78/storybook-addon-vuetify/dist/decorators'; import vuetify from './vuetify'; import Vue from 'vue'; export const parameters = { actions: { argTypesRegex: '^on[AZ].*' }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, }; export const decorators = [ (story, context) => { const wrapped = story(context); return Vue.extend({ vuetify, components: { wrapped }, template: ` <v-app> <v-container fluid> <wrapped/> </v-container> </v-app> `, }); }, withVuetify, ]; main.js
Eliminé una línea de complementos
'@socheatsok78/storybook-addon-vuetify',
vuetify.js
import Vue from 'vue'; import Vuetify from 'vuetify'; import minifyTheme from 'minify-css-string'; import theme from './theme'; import LRU from 'lru-cache'; const themeCache = new LRU({ max: 10, maxAge: 1000 * 60 * 60, // 1 hour }); Vue.use(Vuetify); export default new Vuetify({ theme: { options: { customProperties: true, minifyTheme, themeCache, }, themes: { light: theme, }, }, }); theme.js
export default { // ... other colors primary: '#007BBF', };El tema funciona perfecto ahora, solo las variables no se cargan correctamente y no sé cómo resolver esto, puedes leer sobre esto en los comentarios del artículo.