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:
rsbuild.config.ts
import { pluginSvelte } from '@rsbuild/plugin-svelte';
export default {
plugins: [pluginSvelte()],
};
After registering the plugin, you can 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:
SvelteLoaderOptions
- Default:
const defaultOptions = {
compilerOptions: {
dev: isDev,
},
preprocess: require('svelte-preprocess')(),
emitCss: isProd && !rsbuildConfig.output.injectStyles,
hotReload: isDev && rsbuildConfig.dev.hmr,
};
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: { ... },
}
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 };
},
},
});
