Svelte plugin

Source Code

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

Quick start

Install plugin

Run the following command:

npm

yarn

pnpm

bun

deno

npm add @rsbuild/plugin-svelte -D

Tip

@rsbuild/plugin-svelte v2 no longer supports Rsbuild 1.x or Svelte 4.x. If your project uses these versions, install @rsbuild/plugin-svelte@1 instead.

Register plugin

rsbuild.config.ts

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

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

After registration, you can import *.svelte files in your code.

Options

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

svelteLoaderOptions

These options are passed to svelte-loader. For details, see the svelte-loader documentation.

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

These options are passed to svelte-preprocess. For details, see the svelte-preprocess documentation.

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.

Alias handling in Less/Sass

Svelte preprocessors do not automatically use Rsbuild's path aliases. To use @/ in style imports, configure a Sass importer or a Less plugin.

The following example maps @/ to the src directory next to the configuration file. It supports imports such as @use '@/styles/variables.scss' as * in SCSS and @import '@/styles/variables.less' in Less:

rsbuild.config.mjs

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

const srcPath = path.join(import.meta.dirname, 'src');

export default {
  plugins: [
    pluginSvelte({
      preprocessOptions: {
        scss: {
          importer(url) {
            return url.startsWith('@/')
              ? { file: path.join(srcPath, url.slice(2)) }
              : null;
          },
        },
        less: {
          plugins: [
            {
              install(less, pluginManager) {
                class AliasFileManager extends less.FileManager {
                  supports(filename) {
                    return filename.startsWith('@/');
                  }

                  loadFile(filename, ...args) {
                    return super.loadFile(
                      path.join(srcPath, filename.slice(2)),
                      ...args,
                    );
                  }
                }

                pluginManager.addFileManager(new AliasFileManager());
              },
            },
          ],
        },
      },
    }),
  ],
};

#Svelte plugin

#Quick start

#Install plugin

#Register plugin

#Options

#svelteLoaderOptions

#preprocessOptions

#Notes

#Alias handling in Less/Sass