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 -DRegister 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.
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:
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.