Disable Dart SASS Warnings Produced By External Theme File

Question

I have a third party SCSS file that I am including in my project, and Dart SASS is displaying a long list of warnings as a result. How can I disable the warnings for third party includes?

I'm using Vue with Dart SCSS. Dart has a quietDeps option, but I'm not sure if I'm using it the right way.

// _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
        }
      }
    }
  }
}

Handiwork

Answer 1

See the following issues: https://github.com/webpack-contrib/sass-loader/issues/954 and https://github.com/sass/sass/issues/3065.

The quietDeps option isn't exposed yet to the Node.js API.

In the meantime you can downgrade to sass 1.32 without too many changes.

EDIT: It's now available in sass 1.35.1.

Prowess

It is now working as it's exposed. I'm using 1.35.1 sassOptions: {quietDeps: true} – Clarkclarke

Answer 2

For anyone who looking for Encore configuration

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

Metonymy

Answer 3

For NuxtJS add this to nuxt.config.js

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

Barbed

Do you happen to know the method for Nuxt 3? – Granados

I dont unfortunately – Barbed

No worries, I finally found an answer and posted it for others here: https://mcmap.net/q/492452/-disable-dart-sass-warnings-produced-by-external-theme-file – Granados

Answer 4

For Nuxt v3 with Vite:

// 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');
    }
  }
};

Source: https://github.com/quasarframework/quasar/pull/12034#issuecomment-1021503176

If you happen to use Nuxt-Quasar, a more detailed write-up of this problem and solution is given here

Granados

Answer 5

For anyone working with vue + quasar, what worked for me is tweaking the config to be as follows:

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

Multicolor