close
  • English

      • 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

      Register plugin

      Register the plugin in Rsbuild config:

      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

      When using aliases to import Less or Sass files within Svelte components, you need to manually configure the preprocessor to handle alias resolution. Otherwise, you may encounter "file not found" errors.

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

export default {
  plugins: [
    pluginSvelte({
      preprocessOptions: {
        scss: {
          importer: [
            // Handle alias imports for SCSS files
            (url, prev) => {
              if (url.startsWith('@/')) {
                return { file: url.replace('@/', 'src/') };
              }
              return null;
            },
          ],
        },
        less: {
          // recommend simple alias handling for Less files
          replace: [['@/style', 'style']],
          // use less plugin to handle alias imports
          plugins: [],
        },
      },
    }),
  ],
};

      This ensures that alias imports like @import '@/styles/variables.scss' or @import '@/styles/variables.less' are properly resolved within Svelte components.