close
  • 简体中文

      • Svelte 插件

      源码

      Svelte 插件提供了对 Svelte 组件（.svelte 文件）的支持，插件内部集成了 svelte-loader。

      快速开始

      安装插件

      你可以通过如下的命令安装插件:

      npm
      yarn
      pnpm
      bun
      deno
      npm add @rsbuild/plugin-svelte -D

      注册插件

      你可以在 rsbuild.config.ts 文件中注册插件：

      rsbuild.config.ts
      import { pluginSvelte } from '@rsbuild/plugin-svelte';

export default {
  plugins: [pluginSvelte()],
};

      注册插件后，你可以在代码中引入 *.svelte 单文件组件。

      选项

      如果你需要自定义 Svelte 的编译行为，可以使用以下配置项。

      svelteLoaderOptions

      传递给 svelte-loader 的选项，请查阅 svelte-loader 文档 来了解具体用法。

      • 类型： SvelteLoaderOptions
      • 默认值：
      const defaultOptions = {
  compilerOptions: {
    dev: isDev,
  },
  preprocess: require('svelte-preprocess')(),
  emitCss: isProd && !rsbuildConfig.output.injectStyles,
  hotReload: isDev && rsbuildConfig.dev.hmr,
};
      • 示例：
      pluginSvelte({
  svelteLoaderOptions: {
    preprocess: null,
  },
});

      preprocessOptions

      传递给 svelte-preprocess 的选项，请查阅 svelte-preprocess 文档 来了解具体用法。

      • 类型： AutoPreprocessOptions
      • 默认值： undefined
      interface AutoPreprocessOptions {
  globalStyle: { ... },
  replace: { ... },
  typescript: { ... },
  scss: { ... },
  sass: { ... },
  less: { ... },
  stylus: { ... },
  babel: { ... },
  postcss: { ... },
  coffeescript: { ... },
  pug: { ... },
}
      • 示例：
      pluginSvelte({
  preprocessOptions: {
    aliases: [
      ['potato', 'potatoLanguage'],
      ['pot', 'potatoLanguage'],
    ],
    /** Add a custom language preprocessor */
    potatoLanguage({ content, filename, attributes }) {
      const { code, map } = require('potato-language').render(content);
      return { code, map };
    },
  },
});

      注意事项

      目前 svelte-loader 暂不支持 Svelte v5 热更新，详见 svelte-loader - Hot Reload。

      Less/Sass 中的别名处理

      在 Svelte 组件中使用别名来引入 Less 或 Sass 文件时，需要手动处理别名的路径解析，否则会出现 "file not found" 的错误。

      • 示例：
      rsbuild.config.ts
      import { pluginSvelte } from '@rsbuild/plugin-svelte';

export default {
  plugins: [
    pluginSvelte({
      preprocessOptions: {
        scss: {
          importer: [
            // 处理 SCSS 文件的别名导入
            (url, prev) => {
              if (url.startsWith('@/')) {
                return { file: url.replace('@/', 'src/') };
              }
              return null;
            },
          ],
        },
        less: {
          // 推荐使用 replace 来处理别名导入，更简单
          replace: [['@/style', 'style']],
          // 使用 less plugin 来处理别名导入
          plugins: [],
        },
      },
    }),
  ],
};

      通过配置 preprocessOptions，可以保证在 Svelte 组件中引入的 @import '@/styles/variables.scss 或者 @import '@/styles/variables.less' 能够被正确解析。