Storybook: ¿Cómo cambiar el favicon?

Creado en 18 mar. 2019  ·  2Comentarios  ·  Fuente: storybookjs/storybook

Describe el error

No podemos establecer un favicon personalizado para la compilación y el desarrollo estáticos del libro de cuentos. Hemos intentado usar HtmlWebpackPlugin, configurando el ícono con diferentes URL en preview-header.html y manager-header.html habiendo importado el 'favicon.ico' en config.js siguiente manera:

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)

Y el preview-header.html (o manager-header.html ):

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

También hemos probado estas rutas:

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

Y

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

Usando la primera opción, vemos que el favicon está roto, sin embargo, no vemos en el paquete el favicon.

Sistema:

  • SO: MacOS
  • Dispositivo: Macbook Pro 2019
  • Navegador: Todo
  • Marco: Vue
  • Versión: 5.0.3
question / support ui

Comentario más útil

Aquí está mi configuración. Primero en package.json scripts:

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

Luego, en .storybook/manager-head.html ( NO manager-header.html ):

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

Luego, en public :

$ ls public/
storybook.ico   storybook.png

¡Espero que ayude!

Todos 2 comentarios

Aquí está mi configuración. Primero en package.json scripts:

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

Luego, en .storybook/manager-head.html ( NO manager-header.html ):

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

Luego, en public :

$ ls public/
storybook.ico   storybook.png

¡Espero que ayude!

Mi mal, quise decir .storybook/manager-head.html . ¡Funciona perfectamente ahora, gracias! Tal vez agregar esto a los documentos también ayudaría a otras personas 🙂

¿Fue útil esta página
0 / 5 - 0 calificaciones