How to run SASS with React on Vite?

Question

I created a React project with Vite and want to use SASS as well. I have it installed already but I usually open a git bash and run sass -w sass:css.

Is there a better way to do it? I couldn't understand a solution in the docs, nor an answer online.

This is my package.json:

{
  "name": "my_first_vite",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^1.0.7",
    "sass": "^1.49.0",
    "vite": "^2.7.2"
  }
}

score 22 · Answer 1 · edited Mar 29 '22 at 17:58

22

I found the answer in the vite docs. I had to run:

npm add -D sass

edited Mar 29 '22 at 17:58

Zoe

27,060
21
118
148

answered Mar 25 '22 at 02:02

Kelvin Mutuota

321
1
4

score 9 · Accepted Answer · answered Feb 04 '22 at 02:47

9

In the Vite docs:

Vite does provide built-in support for .scss, .sass, .less, .styl and .stylus files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed

For me it seems that sass should work out of the box for you because you already have it included. There should be no need to run sass separately.

When you run your project in dev mode with vite or build it with vite build, it should include and compile all sass files automatically.

answered Feb 04 '22 at 02:47

Timo

2,740
1
24
22

so I just need to add the .scss file as normal? will try it out! tysm! – 8koi Feb 04 '22 at 18:37
it does indeed works directly, just need to install sass first! TYSM!! – 8koi Feb 05 '22 at 03:13

How to run SASS with React on Vite?

2 Answers2