#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 add @rsbuild/plugin-svelte -D

#Register plugin

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

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

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

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

#Options

To customize the compilation behavior of Svelte, use the following options.

#svelteLoaderOptions

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

• Type: SvelteLoaderOptions
• Default:

const defaultOptions = {
  compilerOptions: {
    dev: isDev,
  },
  preprocess: require('svelte-preprocess')(),
  emitCss: isProd && !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 };
    },
  },
});

#Notes

Currently, svelte-loader does not support HMR for Svelte v5, see svelte-loader - Hot Reload.