It might sound a simple question but it took me enough time to almost get frustrated learning svelte. It is simple, but documantations are not simple. So I wanted to walk through this process.
Table of Contents
Svelte Installation
npx degit sveltejs/template my-svelte-project
npm install
npm run dev
Svelte Preprocess
npm install -D svelte-preprocess
After installation,
1)import svelte-preprocess in rollup.config.js.
2)add preprocess: sveltePreprocess()
-source for svelte preprocess
import svelte from 'rollup-plugin-svelte'
+ import sveltePreprocess from 'svelte-preprocess';
export default {
...
plugins: [
svelte({
+ preprocess: sveltePreprocess(),
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file — better for performance
css: css => {
css.write('public/bundle.css')
},
}),
],
}
Sass
npm install -D sass
<style type="text/scss">
@import "./styles.scss";
</style>
OR
<style lang="scss">
...
</style>
Top comments (5)
Very nice !
For VS Code users, you'll get an error
cannot find module sass node-sass.The solution : daveceddia.com/svelte-with-sass-in...
Just scoping out the potential for Sass with Svelte. Does live preview with sass work ok?
Worked perfectly for me,
pay attention
Easiest way to Add Svelte with scss
github.com/SikandarJODD/Svelte-Js-...
Svelte with Scss