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

Question

我有一个第三方的 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
        }
      }
    }
  }
}

- Alex Wade

Answer 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中可用。

- tcit

---

现在它正在按照所设置的方式运行。我正在使用1.35.1版本，其中sassOptions: {quietDeps: true}被启用。 - dude

Answer 2

对于任何寻找 Encore 配置的人

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

- anhnt

Answer 3

对于NuxtJS，请将以下内容添加到 nuxt.config.js 文件：

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

- ihor.eth

---

你是否知道 Nuxt 3 的方法？ - Jason Landbridge

我很遗憾，我不会。 - ihor.eth

没关系，我终于找到了答案并在这里为其他人发布了：https://dev59.com/G1EG5IYBdhLWcg3wVKi_#75810743 - Jason Landbridge

Answer 4

对于使用Vite的Nuxt v3：

// nuxt.config.ts
export default defineNuxtConfig({

    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    ...silenceSomeSassDeprecationWarnings,
                },
                sass: {
                    ...silenceSomeSassDeprecationWarnings,
                },
            },
        },
    },
});

const silenceSomeSassDeprecationWarnings = {
  verbose: true,
  logger: {
    warn(message, options) {
      const { stderr } = process;
      const span = options.span ?? undefined;
      const stack = (options.stack === 'null' ? undefined : options.stack) ?? undefined;

      if (options.deprecation) {
        if (message.startsWith('Using / for division outside of calc() is deprecated')) {
          // silences above deprecation warning
          return;
        }
        stderr.write('DEPRECATION ');
      }
      stderr.write(`WARNING: ${message}\n`);

      if (span !== undefined) {
        // output the snippet that is causing this warning
        stderr.write(`\n"${span.text}"\n`);
      }

      if (stack !== undefined) {
        // indent each line of the stack
        stderr.write(`    ${stack.toString().trimEnd().replace(/\n/gm, '\n    ')}\n`);
      }

      stderr.write('\n');
    }
  }
};

源代码：https://github.com/quasarframework/quasar/pull/12034#issuecomment-1021503176 如果你正在使用Nuxt-Quasar，关于这个问题和解决方案的更详细说明可以在这里找到：here

- Jason Landbridge

Answer 5

对于使用Vue + Quasar的人来说，以下配置对我有用：

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../API/ClientApp/dist"),
  pluginOptions: {
    quasar: {
      importStrategy: "kebab",
      rtlSupport: false,
    },
  },
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          quietDeps: true
        }
      }
    }
  },
  transpileDependencies: ["quasar"],
};

- Gift Ntokozo Mavuso