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

tcit · Accepted Answer · 2021-06-18T15:31:13.793

13

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.

edited Jun 18 '21 at 15:31

answered Jun 04 '21 at 11:28

tcit

151
2
9

3

It is now working as it's exposed. I'm using 1.35.1 `sassOptions: {quietDeps: true}` – dude Jul 05 '21 at 12:19

score 8 · Answer 2 · answered Aug 07 '21 at 15:12

8

For anyone who looking for Encore configuration

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

answered Aug 07 '21 at 15:12

anhnt

729
1
10
18

score 7 · Answer 3 · answered Sep 22 '21 at 20:24

7

For NuxtJS add this to nuxt.config.js

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

answered Sep 22 '21 at 20:24

ihor.eth

2,207
20
27

Do you happen to know the method for Nuxt 3? – Jason Landbridge Mar 17 '23 at 15:33
I dont unfortunately – ihor.eth Mar 21 '23 at 18:45
1

No worries, I finally found an answer and posted it for others here: https://stackoverflow.com/a/75810743/8205497 – Jason Landbridge Mar 22 '23 at 09:58

score 2 · Answer 4 · answered Jul 20 '22 at 12:55

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

score 2 · Answer 5 · answered Mar 22 '23 at 09:57

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

Disable Dart SASS Warnings Produced By External Theme File

5 Answers5