Disable Dart SASS Warnings Produced By External Theme File

user_1229080 0
Viewed 9173

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
        }
      }
    }
  }
}
sass-loader dart-sass vuejs2 vue.js sass
4 Answers
user_102043990

For NuxtJS add this to nuxt.config.js

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

For anyone who looking for Encore configuration

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

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