Storybook: 如何更改网站图标?

创建于 2019-03-18  ·  2评论  ·  资料来源: storybookjs/storybook

描述错误

我们无法为故事书的静态构建和开发设置自定义图标。 我们使用HtmlWebpackPlugin尝试,在不同的URL设置图标preview-header.htmlmanager-header.html具有进口'的favicon.ico'的config.js如下:

import {
  configure,
  addParameters,
  addDecorator
} from '@storybook/vue'
import {
  Vue
} from 'vue-property-decorator'
import {
  Centered
} from './components/centered'
import {
  Installer
} from '../src/Installer'
import {
  withKnobs
} from '@storybook/addon-knobs'
import '../src/assets/variables.css'
import '../src/assets/theme.css'
import '../src/assets/base.css'
import '../src/sass/main.scss'
import {
  withInfo
} from 'storybook-addon-vue-info'
// We import the favicon here
import './favicon.ico'

Vue.component('Centered', Centered)

const installer = new Installer(Vue)
installer.install(true)

addParameters({
  options: {
    sortStoriesByKind: true
  }
})

const stories = require.context('../src', true, /.stories.ts$/)

function loadStories() {
  stories.keys().forEach(filename => stories(filename))
}

addDecorator(withKnobs)
addDecorator(withInfo)

configure(loadStories, module)

preview-header.html (或manager-header.html ):

<link rel="shortcut icon" href="./favicon.ico">

我们也尝试过以下路线:

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

使用第一个选项,我们看到图标图标已损坏,但是在捆绑包中没有看到图标图标。

系统:

  • 作业系统:MacOS
  • 设备:Macbook Pro 2019
  • 浏览器:全部
  • 框架:Vue
  • 版本:5.0.3
question / support ui

最有用的评论

这是我的设置。 package.json脚本中的第一个:

"storybook": "start-storybook -p 9009 -s public"

然后在.storybook/manager-head.htmlNOT manager-header.html )中:

<link rel="shortcut icon" href="/storybook.ico">
<link rel="icon" type="image/png" href="/storybook.png" sizes="192x192">

然后在public

$ ls public/
storybook.ico   storybook.png

希望有帮助!

所有2条评论

这是我的设置。 package.json脚本中的第一个:

"storybook": "start-storybook -p 9009 -s public"

然后在.storybook/manager-head.htmlNOT manager-header.html )中:

<link rel="shortcut icon" href="/storybook.ico">
<link rel="icon" type="image/png" href="/storybook.png" sizes="192x192">

然后在public

$ ls public/
storybook.ico   storybook.png

希望有帮助!

我的意思是,我的意思是.storybook/manager-head.html 。 现在工作正常,谢谢! 也许将其添加到文档中也会对其他人有所帮助

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

shilman picture shilman  ·  3评论

rpersaud picture rpersaud  ·  3评论

purplecones picture purplecones  ·  3评论

zvictor picture zvictor  ·  3评论

MrOrz picture MrOrz  ·  3评论