バグを説明する
ストーリーブックの静的ビルドおよび開発用にカスタムファビコンを設定することはできません。 次のように、HtmlWebpackPluginを使用して、 preview-header.html
とmanager-header.html
異なるURLでアイコンを設定し、 config.js
「favicon.ico」をインポートしてみました。
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">
最初のオプションを使用すると、ファビコンが壊れていることがわかりますが、バンドルにはファビコンは表示されません。
システム:
これが私の設定です。 package.json
スクリプトの最初:
"storybook": "start-storybook -p 9009 -s public"
次に、 .storybook/manager-head.html
( 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
を意味しました。 今は完璧に動作します、ありがとう! たぶんこれをドキュメントに追加すると、他の人にも役立つでしょう🙂
最も参考になるコメント
これが私の設定です。
package.json
スクリプトの最初:次に、
.storybook/manager-head.html
(manager-header.html
ません):次に
public
:お役に立てば幸いです。