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.