CODEWITHSUNDEEP
vue.jssassvuejs2sass-loaderdart-sass
Alex Wade
Alex Wade

Reputation: 747

Disable Dart SASS Warnings Produced By External Theme File

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

Upvotes: 30

Views: 32115

Answers (9)

StefaDesign
StefaDesign

Reputation: 959

In case if nothing else helps, I have something that might be a temporary help, so is not permanent solution but at least will prevent warning message while you working with NODE.JS (react etc) in DEV mode using CSS trick to hide the warning messages. Downside it will hide errors as well but at least you can do some work without being forced to click on 'close message' button anytime you save code or refresh page. However, Error messages will still appear in DevTools anyway so not biggie.

`//hide annoying overlay warnings
   iframe#webpack-dev-server-client-overlay {
   display: none;
}`

Upvotes: 0

Lionel Paulus
Lionel Paulus

Reputation: 387

Latest solution for Nuxt 3 with Vite. Add this to nuxt.config.ts

// nuxt.config.ts
vite: {
  css: {
    preprocessorOptions: {
      scss: {
        quietDeps: true
      },
    },
  },
},

Upvotes: 1

BMaehr
BMaehr

Reputation: 73

For Ember add to ember-cli-build.js

module.exports = function (defaults) {

  const app = new EmberApp(defaults, {
    sassOptions: {
      quietDeps: true,
    },
  });

  return app.toTree();
};

Upvotes: 0

Ryan Rapini
Ryan Rapini

Reputation: 385

Had this issue in 2024 with an external theme file and another issue

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

for anyone reading this i want to save you the hours I wasted on this:

vite.config.js

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

});

(with vite/5.4.8, "sass-embedded": "^1.79.4", vue2, vuetify v2)

Upvotes: 2

Jason Landbridge
Jason Landbridge

Reputation: 1442

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

Upvotes: 9

Gift Ntokozo Mavuso
Gift Ntokozo Mavuso

Reputation: 427

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

Upvotes: 3

ihor.eth
ihor.eth

Reputation: 2420

For NuxtJS add this to nuxt.config.js

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

Upvotes: 9

anhnt
anhnt

Reputation: 779

For anyone who looking for Encore configuration

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

Upvotes: 9

tcit
tcit

Reputation: 165

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.

Upvotes: 15

Related Questions