Updated: Sass: How to get rid of deprecation warnings in dependencies

Changes

-*TLDR*: sass >= `1.35.0` has the option `quietDeps` and `silenceDeprecations` to silence deprecation warnings from dependencies.
+sass >= `1.35.0` has the option `quietDeps` and `silenceDeprecations` to silence deprecation warnings from dependencies.
-> **quietDeps**: If true, the compiler must not print deprecation warnings
-> for stylesheets that are transitively loaded through an import path or importer.
+* `quietDeps`: No deprecation warnings for dependencies e.g. like Bootstrap
+* `silenceDeprecations`: [Allows to set a list of deprecation types](https://sass-lang.com/documentation/js-api/interfaces/deprecations/) you want to silence for your own code
------
+Below there are a few examples for different build tools how to set the sass options.
-You might have seen deprecation warnings like this during assets compilation:
+## Webpacker
-
-```
-DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
-Recommendation: math.div($grid-gutter-width, 2)
-More info and automated migrator: https://sass-lang.com/d/slash-div
-    ╷
-833 │ $card-group-margin:                 $grid-gutter-width / 2 !default;
-    │                                     ^^^^^^^^^^^^^^^^^^^^^^
-    ╵
-    node_modules/bootstrap/scss/_variables.scss 833:37            @import
-    app/webpack/stylesheets/_definitions.sass 115:9               @import
-    app/webpack/stylesheets/_environment.sass 1:9                 @import
-
-```
-
-or
-
-```
-Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
-```
-
-This special deprecation was introduced in sass `1.33.0`. As you can see the line of code that causes the warning is not under your control as it comes from the bootstrap 4 library. Bootstrap 4 is an old release which will probably not receive further updates that could fix the deprecation.
-
-To turn off sass warnings coming from dependencies you can use the `quietDeps` option, which was introduced in sass `1.35.0`.
-
-You can set it like this in your webpack environment:
-
-```
-
+```javascript
+
const sassLoaderConfig = environment.loaders.get('sass')
const sassLoaderIndex = sassLoaderConfig.use.findIndex(config => { return config.loader === 'sass-loader' })
// Disable deprecation warnings inside dependencies
sassLoaderConfig.use[sassLoaderIndex].options.sassOptions.quietDeps = true
sassLoaderConfig.use[sassLoaderIndex].options.sassOptions.silenceDeprecations = ['import']
```
-Here is an example for a project with webpack (without webpacker). It has a script command inside `package.json` that calls sass with the option as a command line flag:
+## Webpack
-```
-  "scripts": {
-"build": "webpack --config webpack.config.js",
-"build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --quiet-deps"
+```javascript
+module.exports = {
+  module: {
+rules: [
+      {
+        test: /\.s[ac]ss$/i,
+    use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "sass-loader",
+            options: {
+              sassOptions: {
+                quietDeps: true,
+                silenceDeprecations: ['import'],
+              },
+            },
+          },
+        ],
+      },
+    ],
  },
+};
```
-For esbuild, add `quietDeps: true` to the plugin options, like so:
+## ESBuild
+
```javascript
esbuild.build({
  // ...
  plugins: [
    sassPlugin({
      quietDeps: true,
+      silenceDeprecations: ['import'],
      // ...
```