javascript - 如何使用 Storybook 6 在 Vuetify 中自定义主题?
问题描述
我想使用 Storybook 6 在 Vuetify 中自定义主题,我正在使用@socheatsok78/storybook-addon-vuetify
包https://storybook.js.org/addons/@socheatsok78/storybook-addon-vuetify
我完全按照文档所说的做了,但主题仍然无法正常工作。我想用自定义属性和我自己的调色板配置 vuetify。
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[A-Z].*' },
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;
},
};
解决方案
好的,我修复了主题,您可以在下面找到如何执行此操作的教程以及所有工作代码。我在这里找到了一个很好的解释:
https://morphatic.com/2020/09/30/configuring-storybook-6-for-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[A-Z].*' },
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
我从插件中删除了一行
'@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',
};
主题现在完美运行,只有变量没有正确加载,我不知道如何解决这个问题,你可以在文章评论中阅读
推荐阅读
- c# - Serilog 是否在配置日志级别时自动捕获日志
- java - Gradle 多项目传递依赖
- excel - 如何在python中将一列数据传输到具有多列的一行中?
- react-router-v4 - 如何在路由器之外访问“match.params”?
- php - 如何在godaddy服务器上上传一组图像?
- c - STM32F7 - 从 RAM 和闪存执行代码
- php - 如何用单个字符串替换嵌套或多级数组的选择器
- javascript - Mongodb:如何通过我的 api 填充我的架构中引用的架构
- c# - Unity 中的 KewordRecognizer:MissingMethodException
- c# - Unity透明视频播放器不显示在设备上?