How to set sassOptions in Vite

Question

With webpack, we can set sassOptions like below:

{
  loader: require.resolve('sass-loader'),
  options: {
    sassOptions: { quietDeps: true },
  },
}

Following the vite document, I'm trying to config as below:

  css: {
    preprocessorOptions: {
      scss: {
        sassOptions: { quietDeps: true },
      },
    },
  },

But it seems not work for me. What I need is to hide third-party sass deps's warning message in terminal.

Casablanca

Did you find the solution? I got ReferenceErrror: scss is not defined here. – Tannertannery

None till now. I've also asked on GitHub, but not response... – Casablanca

Answer 1

To hide the warnings, update your vite.config.js like this:

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        quietDeps: true
      }
    }
  }
})

Porthole

I don't think this is working for me with vite 3.1.8 and sass 1.55.0. Can anyone else confirm it working? I am trying to suppress warnings about / in font-awesome 4... it's possible this arg just doesn't work to do that, although it's suggested elsewhere it ought to. – Fermentative

Works for me with Vite v4.5.3 and sass v1.77.8 – Hacking

Answer 2

The Vite docs want you to put the settings in css.preprocessorOptions.scss.quiet, as others have mentioned. This however does not work, and it isn't Vite's fault, it's Sass's.

The problem is that the Sass devs have made 3 very dumb decisions:

1. They don't want anyone to ever be able to turn off deprecation warnings, because as soon as those features are removed from the language and go from warnings to errors, they will be flooded with GitHub issues.
2. They made one exception, which is if a dependency is the cause, then you can "quiet" just those.
3. But then they made it so that their definition of a "dependency" is so strict that it is unlikely anyone actually meets that criteria, so you can't actually turn off the deprecation warnings (their intended outcome).

Your options:

1. Create Issues or PR's to fix the warnings in the dependencies you use.
   • Cool in theory, but what if they're already fixed, and you are just looking to avoid upgrading your entire component library dependency because the project isn't worth that effort.
2. You can use sass version 1.32.13, the last version without the warnings (worked for me, though this feels like a shitty solution)
3. Try to adjust your code to work with the rigid system they define as a "dependency" (good luck)
4. Drop Sass all-together and use something else (the new Sass API kinda sucks anyways)

Overdevelop

Indeed. Their docs say "Stylesheets that are imported relative to the entrypoint are not considered dependencies.".. Well, I am using Bootstrap (SCSS version of it) and obviously hosting it myself, so clearly the path is going to be relative... – Harlot

The definition of a "dependency" link is dead. – Osburn

Answer 3

You can try this instead:

css: {
        preprocessorOptions: {
            scss: {
                quietDeps: true,
            },
        },
    }

Shakeup

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. – Samhita