SASS has a pretty strong fan base, It was something beautiful that Introduced a feature that was never needed but definitely desired and cool to have. This is why sass is not widely adopted and frameworks only do a little to make sure it works out of the box or seamlessly.
Nevertheless, Svelte, a framework that supercharges developers with superpowers and massively increases productivity in the building of the web, making it a more enjoyable process for developers, did not forget about the sass enthusiast.
It does not require much effort to get it working in your svelte project, and not just the global CSS, but also the scoped styles. How beautiful.
1. Install Sass and Svelte Preprocess
In order to of course compile your scss, you need to install it preprocessor, there are multiple options for this, stated as follows:
- node-sass, this is deprecated and I strongly recommend not using it.
- dart-sass, this is currently maintained, and better implementation of
node-sass
, also have been transformed intosass
. sass
this is perfect!
If you’re using sveltekit, you can skip installing svelte-preprocess and also step 2 below.
Install as a dev-dependency using:
// npm
npm i -D sass svelte-preprocess
// pnpm
pnpm add -D sass svelte-preprocess
// yarn
yarn add -D sass svelte-preprocess
2. Svelte Preprocess Config
This step is only required for Svelte and not Sveltekit. Sveltekit by default has the necessary, to handle Sass/Scss preprocessor.
In your rolloup.config.js
import svelte from 'rollup-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';
export default {
// other configs
plugins: [
svelte({
preprocess: sveltePreprocess(),
}),
],
};
If you have global CSS written in scss, you can modify the config to include the path:
These additional config can also be done in sveltekit in your
svelte.config.js
// ...
preprocess: sveltePreprocess({
scss: {
includePaths: ['src/styles'], // Optional, specify additional include paths
},
}),
// ...
You can learn more about the official svelte-preprocess and other available config here
3. Create a Svelte component with Sass enabled
To enable Sass/Scss in scoped styles, all you have to do is add lang="scss"
in the <style>
tag.
Example
<style lang="scss">
$primary-color: #3498db;
$secondary-color: #2ecc71;
.button {
background-color: $primary-color;
color: white;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s ease;
&:hover {
background-color: darken($primary-color, 10%);
}
}
</style>
Following these steps, you can now harness the power of Scss and Svelte altogether.
Peace ✌
Be the first to comment!