Vuetify VIcon 没有出现在 Storybook 中

Posted 2023-02-19

【中文标题】Vuetify VIcon 没有出现在 Storybook 中

【英文标题】：Vuetify VIcon doesn't show up in Storybook

【发布时间】：2021-01-08 21:54:42

【问题描述】：

我正在使用 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 部分丢失（应该是实际图标）。因此，当我检查 Storybook 页面（图标应该在的位置）时，设置了样式、添加了类等。

已经尝试添加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 导入组件（而不仅仅是.storybook/vuetify_storybook.js 中的vuetify) 并在本地注册它们（在preview.js 和故事文件中 - 没有变化）

【问题讨论】：

可能是一个很长的镜头，但是否有可能其他一些 CSS 将您的 :before 的 content 属性设置为 none？因为那将有效地消除他们哪种禁止检查。作为测试，您可以将之前的 content 属性设置为 !important 并查看它是否呈现。这将允许您检查元素，从而查看none（现在已被覆盖）来自何处。你有没有机会建立一个minimal reproducible example？

@tao 感谢这个想法 - 不幸的是，我无法手动设置它，因为 Vuetify “隐藏”了这一点。我试图考虑创建一个最小的、可重现的示例，但这样做可能需要很长时间，所以我只保留它作为最后的手段（在我的开发环境中设置所有内容并减少问题......Vue，Vuetify，Storybook，将它们链接在一起等等......啊哈:)）。但是，如果没有想到 cca。两三天，那我就完成了。无论如何 - 感谢您的快速响应。

【参考方案1】：

好的，只是需要另一种看法：

删除了指向 Material design 图标 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