Question

我正在使用 Vuetify 开发 Vue 应用，并使用 Storybook 记录组件。

我编写的故事很好，所有组件似乎都显示在 Storybook 中（例如我的自定义组件和 Vuetify 组件）。除了 VIcon 。

我有一个使用 Vuetify 的 VIcon 的组件，但我无法显示图标（在实际应用中这没有问题）

设置：

src / plugins / vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
  }
});

.storybook / vuetify_storybook.js

import Vue from 'vue';
import Vuetify from 'vuetify'; // loads all components
import 'vuetify/dist/vuetify.min.css'; // all the css for components
import config from '@/plugins/vuetify'; // basic config with theme

Vue.use(Vuetify);

export default new Vuetify(config);

.storybook / preview.js

import { addDecorator } from '@storybook/vue';
import vuetify from './vuetify_storybook';

addDecorator(() => ({
  vuetify,
  template: `
    <v-app>
      <story />
    </v-app>
    `,
}));

.storybook / main.js

const path = require('path');

module.exports = {
  stories: [
    '../stories/**/*.stories.js',
    '../src/**/*.stories.js'
  ],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-knobs',
    '@storybook/addon-storysource'
  ],

  webpackFinal: async (config, { configType }) => {

    config.resolve.extensions.push('.vue', '.css', '.less', '.scss', '.sass', '.html')

    // Use Sass loader for vuetify components
    config.module.rules.push({
      test: /\.sass$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            additionalData: "@import '@/styles/variables.scss';"
          }
        }
      ],
    });

    config.module.rules.push({
      resolve: {
        alias: {
          '@': path.resolve(__dirname, '../src'),
          vue: 'vue/dist/vue.js',
          'vue$': 'vue/dist/vue.esm.js',          
        },
      },
    });

    // Return the altered config
    return config;
  },
};

CustomVIcon.stories.js

import { withKnobs } from '@storybook/addon-knobs'

export default {
  title: 'Display that icon',
  decorators: [withKnobs]
}

export const displayIcon = () => {
  return {
    template: `<v-icon>mdi-alert</v-icon>`
  }
}

如果我添加的文本不是 mdi图标（例如<v-icon>notmditext</v-icon>），则会显示该文本-但只要添加- （破折号/减号）显示在字符串上，

我可以在控制台中看到图标的HTML（部分内容），仅缺少::before部分（应该是实际的图标）。因此，当我检查“故事书”页面（图标应位于的位置）时，设置样式，添加类等。

已经尝试添加https://www.npmjs.com/package/storybook-addon-jsx（实际上是使用JSX渲染组件），没有任何变化（没有v-icon）
已经尝试将其他组件（例如VCard）放入故事中，并且它们出现了（其他故事运行得很好）
Vue 是2.6.12， Vuetify 是2.3.10， @ storybook / vue 6.0.21-非常新鲜
还尝试从vuetify/lib（而不只是vuetify)中的.storybook/vuetify_storybook.js导入组件并在本地注册它们（在preview.js和故事文件中-不变）

Answer 1

好的，只需要对这些事物有另一种看法：

删除了指向“材料设计”图标CDN的链接：

// remove this from public/index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

将软件包从@mdi/js更改为@mdi/font

npm remove @mdi/js
npm install @mdi/font -D

在两个位置导入了相应的CSS：

// add this to src/main.js & .storybook/vuetify_storybook.js
import '@mdi/font/css/materialdesignicons.css';

更改了 Vuetify 配置

// in src/plugins/vuetify.js
icons: {
  // iconfont: 'mdiSvg', // change this
  iconfont: 'mdi', // to this
},

然后瞧瞧！出现 VIcon 。

因此，问题在于我认为所有设置均正确，但事实并非如此：应用程序中的图标来自CDN（没有查看网络标签），当我从index.html删除CDN链接时，它立即变得显而易见。

有关在 Vuetify 中设置图标的更多信息：Install Material Design Icons

Vuetify VIcon未出现在故事书中

1 个答案:

Vuetify VIcon未出现在故事​​书中

1 个答案:

Vuetify VIcon未出现在故事书中