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.

Answer 1

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

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

UPDATE: a critical requirement is that you have your paths relative to node_modules or another folder that SCSS is considering to hold external modules. These folders can be listed in loadPaths scss option (node_modules is included by default, at least when SCSS is run from Vite). And not relative to current file!

E.g. this path works - all warnings are excluded:

@forward 'spinkit/scss/spinners/7-three-bounce.scss';

This path doesn't work - all warnings are shown:

@forward '../../node_modules/spinkit/scss/spinners/7-three-bounce.scss';

This requirement can be understood by reading SCSS quietDeps option description.