close
logologo
指南
配置
插件
API
社区
版本
更新日志
Rsbuild 0.x 文档
English
简体中文
指南
配置
插件
API
社区
更新日志
Rsbuild 0.x 文档
English
简体中文
logologo

插件列表

总览
React 插件
SVGR 插件
Vue 插件
Preact 插件
Svelte 插件
Solid 插件
Babel 插件
Sass 插件
Less 插件
Stylus 插件

开发

插件开发
插件 API
插件 hooks
📝 在 GitHub 上编辑此页
上一页Preact 插件
下一页Solid 插件

#Svelte 插件

Source

Svelte 插件提供了对 Svelte 组件(.svelte 文件)的支持,插件内部集成了 svelte-loader。

#快速开始

#安装插件

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

npm
yarn
pnpm
bun
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' 能够被正确解析。