DEV Community

DhiraNegi
DhiraNegi

Posted on

Svelte + Webpack + Sass

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:

Image description

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

Image description

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

Image description

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)