This div is used to preload the font
Guide
Config
Plugin
API
Community
Guide
Config
Plugin
API
Community

Svelte Plugin

The Svelte plugin provides support for Svelte components (.svelte files). The plugin internally integrates svelte-loader.

Quick Start

Install Plugin

You can install the plugin using the following command:

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

Register Plugin

You can register the plugin in the rsbuild.config.ts file:

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

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

After registering the plugin, you can directly import *.svelte files in your code.

Options

If you need to customize the compilation behavior of Svelte, you can use the following configs.

svelteLoaderOptions

Options passed to svelte-loader, please refer to the svelte-loader documentation for detailed usage.

  • Type: Object
  • Default:
const defaultOptions = {
  compilerOptions: {
    dev: isDev,
  },
  preprocess: require('svelte-preprocess')(),
  emitCss: !rsbuildConfig.output.injectStyles,
  hotReload: isDev && rsbuildConfig.dev.hmr,
};
  • Example:
pluginSvelte({
  svelteLoaderOptions: {
    preprocess: null,
  },
});

preprocessOptions

Options passed to svelte-preprocess, please refer to the svelte-preprocess documentation for detailed usage.

  • Type: AutoPreprocessOptions
  • Default: undefined
interface AutoPreprocessOptions {
  globalStyle: { ... },
  replace: { ... },
  typescript: { ... },
  scss: { ... },
  sass: { ... },
  less: { ... },
  stylus: { ... },
  babel: { ... },
  postcss: { ... },
  coffeescript: { ... },
  pug: { ... },
}
  • Example:
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 };
    },
  },
});