How to set quietDeps option for dart-sass

[gcangussu]

Update

dart-sass v1.35.1 supports quietDeps and verbose flags, and so you can pass it using sassOptions object on sass-loader options. Docs reference. See example below that now works.

---

Documentation Is:

• Missing
• Needed
• Confusing
• Not Sure?

Please Explain in Detail...

It is not clear how to set the quietDeps flag on the sass options. I have tried the below which doesn't work:

const sassLoader = {
  loader: 'sass-loader',
  options: {
    sassOptions: {
      quietDeps: true,
    },
  },
};

This option is useful since deprecation of division with /. Many dependencies trigger the deprecation warning, and these warnings are making very difficult to see the warnings of my own code.

Your Proposal for Changes

I need some help in figuring how to configure this. Once figured out I can open a PR documenting it.

[alexander-akait]

Add a quietDeps argument to compile(), compileString(), compileAsync(), and compileStringAsync() which silences compiler warnings from stylesheets loaded through importers, load paths, and package: URLs.

Because we use sass.render to compile sass/scss to css, and render doesn't support the quietDeps option

[alexander-akait]

compile(), compileString(), compileAsync(), and compileStringAsync()

is dart API, you need to open an issue in sass repo and ask them to add the quietDeps option to Node.js API

[gcangussu]

is dart API, you need to open an issue in sass repo and ask them to add the quietDeps option to Node.js API

Thank you, will do that

[alexander-akait]

Let's close here (we can't fix it in our code), when sass will add this option to Node.js API we will support it out of box without any problems

[pataar]

Weirdly enough, I've set the option in sassOptions but still getting deprecation warnings.

Using 1.35.0 with the updated JS API: sass/sass#3065 (comment)

[phil-w]

Aye, I still can't get rid of these warnings. I know I'm using stuff which "sass" wants to fill my screen with dire warnings about, but all that is really not my fault and I can't do anything about it.

The result is screens of garbage output from sass which just gets in the way of messages which could possibly be important to me.

Up to and including 1.32.12. I wasn't harassed because someone thinks some dependency over which I've no control over broke some rules I don't care about. Later versions remain unusable: a shot to the foot.

[alexander-akait]

We have this options https://webpack.js.org/configuration/other-options/#ignorewarnings, just put simple regexp and it will fix the problem

[kubijo]

That shouldn't, however, be needed since they added the JS API option to silence these warnings… (as @pataar mentioned).
Can you @alexander-akait, please take a look on what is the issue there?

[alexander-akait]

@kubijo hm, if they added this option, it should work, we just clone your options and pass to sass https://github.com/webpack-contrib/sass-loader/blob/master/src/utils.js#L128, I will look at near future

[pataar]

This might be the same issue: sass/dart-sass#1360. Not sure though. But as @alexander-akait mentioned, It wouldn't require any changes to sass-loader.

[pataar]

https://github.com/sass/dart-sass/releases/tag/1.35.1 has been released, which might fix the issue. Testing this later today.

[alexander-akait]

Anybody can check this, should I check it (because it in my todo)?

[gcangussu]

I can confirm that on my project quietDeps flag is working correctly since dart-sass 1.35.1

{
  loader: require.resolve('sass-loader'),
  options: {
    sassOptions: { quietDeps: true },
  },
}

[alexander-akait]

@gcangussu thanks

[kubijo]

It doesn't seem like it did anything for me… I'm suspecting yarn's PNP to be tripping up the detection, but I have no idea how to check that

[alexander-akait]

@kubijo try to remove lock file and install deps again, ideally you should setup bot for regeneration lock files, otherwise you will have a lot of old transitive deps

[kubijo]

I'm pretty sure that is not the case here as yarn flattens the hierarchy and do have only one version

 λ yarn why sass
└─ root-workspace-0b6124@workspace:.
   └─ sass@npm:1.35.1 (via npm:1.35.1)

[hamzahsn]

It seems quietDeps: true works perfectly with sass "sass": "^1.34.1" so give it a try.

[xavierfoucrier]

@hamzahsn It shouldn't be possible, because it's part of 1.35+ API, according to https://github.com/sass/dart-sass/blob/master/CHANGELOG.md#1350.

@alexander-akait Can you have a look and confirm that it works? On my side even after rm -rf node_modules and installing again with npm i it doesn't seem to do anything. Using [email protected] with [email protected].

Thanks 😉

[alexander-akait]

Here confirmation from other developers #954 (comment), if you need personal help with your project please share link on the project or create reproducible example

[xavierfoucrier]

@alexander-akait I will have a look (again) later. Thanks for answering as usual 😉

[hamzahsn]

@xavierfoucrier could you share some code so we can reproduce your project?

[xavierfoucrier]

@hamzahsn I will try again and share if it doesn't work. I am using Foundation framework with @use rule and @forward, tried with @import and looks like it's the same result. Need to investiguate further. Thanks!

[carlosHerz]

Any solution to this? Even setting quietDeps: true i still get like a hundred warnings like this one WARNING: You probably don't mean to use the color value purple in interpolation here.

[gcangussu]

@carlosHerz I can think on some possibilities for those warnings:

• The warning is in your own code, not on a dependency
• The sass compiler is wrongly flagging a dependency as your own code
• You've miss-configured quietDeps, maybe a typo or it's on the wrong object on the config.

[corygottschalk]

In my case it appears the sass compiler is wrongly flagging dependencies as my code because quietDeps was set to true, but isDependency was set to false. No clue why though.

Anyone have any ideas why this might be the case?

[mokone91]

Hi! have same problem..


also tried to downgrade sass to 1.35.1 to try te reach result as above - but have the same warning with different styles..

any suggestions?

UPD:
have noticed that the message 'webpack 5.65.0 compiled with 2 warnings in 61633 ms' not related to this warnings at all,
2 warnings which I can see - related to bundle sizes, so this 'deprecation warnings' cant be filtered using 'ignoreWarnings' webpack feature.

[bowerscodes-COP]

Hi, I'm getting the same problem after trying to migrate COP from node-sass to sass. I'm no Sass expert but my understanding, from what I've read around the subject, is that this is a deprecated syntax but the warnings can be avoided by changing things like $govuk-gutter / 2 to $govuk-gutter * 0.5 (in the below screenshot). Bearing in mind that this thread is now 2 years old, are there any plans to update this syntax, or have I completely misunderstood the problem? 🙃 (I have very little Sass experience so this is entirely possible)

At the moment, with sass installed, we're getting hundreds of these warnings - and the amount of extra time it's adding every time we spin up the app makes it unfeasible for us to commit the new dependency to Main. However at at the same time, node-sass is now deprecated so we need to switch it over.

I've read through the quietDeps solution but isn't that just silencing the warnings (i.e. not resolving the issue)? I'm also unsure of how to implement that on COP, as I can't see that we ever instantiate sass via js anywhere.

Appreciate i'm late to the party but what's the latest on this?