How to set sassOptions?

[mashirozx]

In webpack. we can do as bellow (code from vue-loader documentation):

// webpack.config.js -> module.rules
{
  test: /\.sass$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        indentedSyntax: true,
        // sass-loader version >= 8
        sassOptions: {
          indentedSyntax: true
        }
      }
    }
  ]
}

But how can we set the sassOptions in Vite?

I tried this following the vite document but not work:

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

What I need indeed is to hide third-party sass deps' warning messages in terminal.

[Clndl]

It works fine for me, like this:

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

[steffchep]

This did not work for me, the warnings are still printed. According to the doc, this goes next to plugins. Is this correct?

[ianshea]

Even though I'm using scss files, I changed the config to sass and quietDeps now works as expected.

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

[ryanrapini]

Had this issue in 2024 with an external theme file and another issue (im stuck on an old version of a sass library which does some division)

quietDeps never worked for me for either of these errors:

Deprecation [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
More info: https://sass-lang.com/d/legacy-js-api

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
More info and automated migrator: https://sass-lang.com/d/slash-div

for anyone reading this i want to save you the hours I wasted on this:

vite.config.js

export default defineConfig({
    css: {
        preprocessorOptions: {
            scss: {
                api: 'modern-compiler',
            },
            sass: {
                silenceDeprecations: ['slash-div'],
            },
        },
    },
    plugins: {...

});

(with vite/5.4.8, "sass-embedded": "^1.79.4", vue2, vuetify v2)

[zhuhang-jasper]

for anyone reading this i want to save you the hours I wasted on this:

vite.config.js

export default defineConfig({
    css: {
        preprocessorOptions: {
            scss: {
                api: 'modern-compiler',
            },
            sass: {
                silenceDeprecations: ['slash-div'],
            },
        },
    },
    plugins: {...

});

thanks! was looking to silence the warnings, but followed your way to use modern-compiler instead.