描述错误
我们无法为故事书的静态构建和开发设置自定义图标。 我们使用HtmlWebpackPlugin尝试,在不同的URL设置图标preview-header.html
和manager-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">
使用第一个选项,我们看到图标图标已损坏,但是在捆绑包中没有看到图标图标。
系统:
这是我的设置。 package.json
脚本中的第一个:
"storybook": "start-storybook -p 9009 -s public"
然后在.storybook/manager-head.html
( NOT 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
( NOTmanager-header.html
)中:然后在
public
:希望有帮助!