如何在 Vite 中设置 sassOptions

Question

使用 webpack，我们可以像下面这样设置 sassOptions：

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

在vite 文档之后，我尝试配置如下：

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

但它似乎对我不起作用。我需要的是在终端中隐藏第三方 sass deps 的警告消息。

Answer 1

要隐藏警告，请vite.config.js像这样更新：

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

Answer 2

Vite 文档希望您将设置放入 中css.preprocessorOptions.scss.quiet，正如其他人提到的那样。然而这不起作用，这不是 Vite 的错，而是 Sass 的错。

问题是 Sass 开发人员做出了 3 个非常愚蠢的决定：

1. 他们不希望任何人能够关闭弃用警告，因为一旦这些功能从语言中删除并从警告变为错误，他们就会被GitHub 问题淹没。
2. 他们做了一个例外，那就是如果依赖是原因，那么你可以“安静”那些。
3. 但后来他们对“依赖项”的定义非常严格，以至于不太可能有人真正满足该标准，因此您实际上无法关闭弃用警告（他们的预期结果）。

您的选择：

1. 创建问题或 PR 来修复您使用的依赖项中的警告。
   • 理论上很酷，但是如果它们已经修复了，而您只是想避免升级整个组件库依赖项，因为该项目不值得付出这样的努力，该怎么办？
2. 您可以使用sassversion 1.32.13，即没有警告的最后一个版本（对我有用，尽管这感觉像是一个糟糕的解决方案）
3. 尝试调整您的代码以与他们定义为“依赖项”的严格系统一起工作（祝你好运）
4. 完全放弃 Sass 并使用其他东西（无论如何，新的 Sass API 有点糟糕）