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
- npm install sass-loader sass webpack --save-dev
Now, if you get an error regarding 'style-loader' . Run the below command to install style-loader
- npm install style-loader --save
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 π
Top comments (0)