How to run SASS whit React on Vite?

Question

I created a react project whit 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"
  }
}

Answer 1

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.

Answer 2

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

npm add -D sass