首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在Storybook和SvelteKit中使用vite插件

在Storybook和SvelteKit中使用vite插件
EN

Stack Overflow用户
提问于 2021-10-08 11:58:08
回答 1查看 1.2K关注 0票数 4

我已经使用以下配置( @poppanator/sveltekit-svg )成功地使用SvelteKit设置了SvelteKit:

代码语言:javascript
运行
复制
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):

代码语言:javascript
运行
复制
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中工作呢?

EN

回答 1

Stack Overflow用户

发布于 2022-01-07 12:10:47

SvelteKit使用Vite,Storybook使用Webpack

要使svg导入正常工作,您需要为webpack找到一个类似于@poppanator/sveltekit-svg插件和将其添加到您的故事书配置中的加载程序。

我不确定是否存在类似的加载程序(还),根据您的使用情况,将.svg文件重命名为.svelte可能是另一种选择

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69495482

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档