https://github.com/sikandarjodd/svelte-js-with-scss

Adding Scss to Svelte Js
https://github.com/sikandarjodd/svelte-js-with-scss

sass sass-framework scss svelte svelte-scss sveltejs sveltejs-language

Last synced: 3 months ago
JSON representation

Adding Scss to Svelte Js

• Host: GitHub
• URL: https://github.com/sikandarjodd/svelte-js-with-scss
• Owner: SikandarJODD
• License: mit
• Created: 2023-01-01T07:52:57.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-02T07:15:35.000Z (over 2 years ago)
• Last Synced: 2025-04-09T05:33:24.836Z (3 months ago)
• Topics: sass, sass-framework, scss, svelte, svelte-scss, sveltejs, sveltejs-language
• Language: CSS
• Homepage:
• Size: 268 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




    



Adding Scss to Svelte Js

## Installation

Install Svelte with vite

```bash

  npm create vite@latest

```

```bash

  Project name : project

  Framework : SvelteJs

  Language : JavaScript

```

```bash

  cd project

  npm i

```

```bash

  npm i svelte-preprocess node-sass --save--dev

  npm i sass --save--dev

```

## Edti vite.config.js

```bash

    import { defineConfig } from 'vite'

    import { svelte } from '@sveltejs/vite-plugin-svelte'

    import { sveltePreprocess } from 'svelte-preprocess/dist/autoProcess'

    // https://vitejs.dev/config/

    export default defineConfig({

    plugins: [svelte({

        preprocess: sveltePreprocess()

    })],

    })

```

Restart the VS-Code and Run the Command

```bash

  npm run dev

```

Project : [Localhost:5173](http://localhost:5173)

## package.json Code :

![Screenshot](PackageImg.PNG)

## Running on port : 5173

![Screenshot](output.png)

## Scss Code in App.svelte

![Screenshot](Code.PNG)