Svelte + Webpack + Sass

#svelte #beginners #webpack #saas

Solving this particular solution took me quite some more time than expected. So, I thought of sharing it here.

Starters

npx degit sveltejs/template-webpack svelte-app (for svelte installation with webpack)
cd svelte-app
npm install
npm run dev

After running npm run dev, Svelte will compile and build your application. It will start a local server at localhost:8080.

Main Course

To begin, you'll need to install sass-loader

Now, if you get an error regarding 'style-loader' . Run the below command to install style-loader

Further, you have a starter pack of svelte with webpack and your folder structure have default files and folders.

If you wish to explore more about the details of the files.
Check it out here

You will have webpack.config.js instead of rollup.config.js

Make a few changes to webpack.config.js

Refer the image:

For now, I have renamed my global css file as global.scss and made some changes in the code.

Also, change the import statement in main.js file.

Dessert

You can now see the changes in your localhost with the scss we wrote in global.scss.

If you want to see Sass with rollup, you can find it here

Do have a look at this repo https://github.com/markoboy/svelte-webpack-babel-scss#get-started (An extension of the webpack template)

HAPPY LEARNING 😄

DEV Community