禁用外部主题文件生成的 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
        }
      }
    }
  }
}

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.

中提供

Answer 2

对于任何寻找 Encore 配置的人

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

Answer 3

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

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

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，这里

给出了这个问题和解决方案的更详细的描述

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"],
};

Answer 6

在 2024 年使用外部主题文件和另一个问题时遇到了这个问题

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

对于阅读本文的任何人，我想节省您在这方面浪费的时间：

vite.config.js

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

});

（使用 vite/5.4.8，“sass-embedded”：“^1.79.4”，vue2，vuetify v2）