我已经使用以下配置( @poppanator/sveltekit-svg
)成功地使用SvelteKit设置了SvelteKit:
import preprocess from 'svelte-preprocess';
import svg from '@poppanator/sveltekit-svg';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
vite: {
plugins: [svg()]
}
}
};
export default config;
这在使用SvelteKit运行npm run dev
项目时起作用。但是,我不能让svg插件在童话里工作。
我有以下故事簿配置(.storybook/main.cjs
):
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-svelte-csf"
],
"core": {
"builder": "storybook-builder-vite"
},
"svelteOptions": {
preprocess: import("../svelte.config.js").preprocess
}
}
在童话故事(或故事使用的组件中)中导入SVG文件时,只返回SVG文件的文件路径。在SvelteKit路由中导入SVG文件时,将按应有的方式返回Svelte组件。
我已经在Storybook 6.3.10和6.4.0-beta.7和storybook-builder-vite
(0.1.0)中尝试过这一点。
如何让SVG导入在Storybook中工作呢?
发布于 2022-01-07 12:10:47
SvelteKit使用Vite,Storybook使用Webpack。
要使svg导入正常工作,您需要为webpack找到一个类似于@poppanator/sveltekit-svg插件和将其添加到您的故事书配置中的加载程序。
我不确定是否存在类似的加载程序(还),根据您的使用情况,将.svg文件重命名为.svelte可能是另一种选择
https://stackoverflow.com/questions/69495482
复制相似问题