Adds support for .svelte
files. Enables Hot Reloading in Svelte components.
Install it using npm
npm i -D @reboost/plugin-svelte
Install svelte
package, if not already installed
npm i svelte
Import it from the package
const { start } = require('reboost');
const SveltePlugin = require('@reboost/plugin-svelte');
Add it to the plugins array
const { start } = require('reboost');
const SveltePlugin = require('@reboost/plugin-svelte');
start({
plugins: [
SveltePlugin({
// Options
})
]
})
import Component from './file.svelte';
Type: string
Default: ./svelte.config.js
Path to Svelte config file.
Type: object
Options for svelte-hmr
. Controls
Svelte's hot reloading behavior.
Type: object | array
Preprocessor plugin(s) to use with Svelte. You can grab some plugins from Svelte's community-maintained preprocessing plugins.
svelte-preprocess
is an official preprocessor plugin which can transform
PostCSS, SCSS, Pug, and more. Let's see how we can use it
with Svelte.
const { start, DefaultConfig } = require('reboost');
const SveltePlugin = require('@reboost/plugin-svelte');
const sveltePreprocess = require('svelte-preprocess');
const { pug, scss } = require('svelte-preprocess');
start({
// ...
plugins: [
SveltePlugin({
// Auto detect compatible languages
// and transform them
preprocess: sveltePreprocess({ /* Options */ }),
// You can also use stand-alone preprocessors
preprocess: [
pug({ /* Options */ }),
scss({ /* Options */ })
]
})
]
})
If you've enabled SCSS preprocessor, you can now use SCSS syntax in your Svelte files, like so
<style lang="scss">
.card {
padding: 10px;
background-color: dodgerblue;
h1 {
font-weight: normal;
}
p {
text-align: justify;
}
}
</style>
<div class="card">
<h1>Svelte</h1>
<p>A cool tagline</p>
</div>
You have to always type .svelte
extension to import Svelte
files. You can set up automatic import using
resolve.extensions
option
const { start, DefaultConfig } = require('reboost');
const SveltePlugin = require('@reboost/plugin-svelte');
start({
resolve: {
extensions: ['.svelte', ...DefaultConfig.resolve.extensions]
},
plugins: [
SveltePlugin()
]
})
Now you can write
import App from './file';
instead of
import App from './file.svelte';
Licensed under the MIT License.