禁用外部主题文件产生的 Dart SASS 警告答案

【问题标题】：Disable Dart SASS Warnings Produced By External Theme File禁用外部主题文件产生的 Dart SASS 警告
【发布时间】：2021-08-21 00:59:06
【问题描述】：

我的项目中包含了一个第三方 SCSS 文件，因此 Dart SASS 会显示一长串警告。如何禁用第三方包含的警告？

我正在使用 Vue 和 Dart SCSS。 Dart 有一个 quietDeps 选项，但我不确定我是否以正确的方式使用它。

// _common.scss
// Line below causes warnings to be displayed.
@import "~@progress/kendo-theme-default/dist/all";
// ...

// Vue.config.js
module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~@/styles/common";',
        sassOptions: {
          quietDeps: true
        }
      }
    }
  }
}

【问题讨论】：

标签： vue.js sass vuejs2 sass-loader dart-sass

【解决方案1】：

查看以下问题：https://github.com/webpack-contrib/sass-loader/issues/954 和 https://github.com/sass/sass/issues/3065。

quietDeps 选项尚未向 Node.js API 公开。

与此同时，您可以降级到 sass 1.32，而无需进行太多更改。

编辑：它现在在sass 1.35.1 中可用。

【讨论】：

它现在可以正常工作了。我正在使用 1.35.1 sassOptions: {quietDeps: true}

【解决方案2】：

对于 NuxtJS，将其添加到 nuxt.config.js

  build: {
    loaders: {
      scss: {
        sassOptions: {
          quietDeps: true
        }
      }
    }
  }

【讨论】：

【解决方案3】：

对于任何寻找 Encore 配置的人

Encore.enableSassLoader((options) => {
  options.sassOptions = {
    quietDeps: true, // disable warning msg
  }
})

【讨论】：