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 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: !isProd,
  },
  preprocess: require('svelte-preprocess')(),
  emitCss: !rsbuildConfig.output.disableCssExtract,
  hotReload: !isProd && rsbuildConfig.dev.hmr,
}

• Example:

pluginSvelte({
  svelteLoaderOptions: {
    preprocess: null,
  },
});