TLDR: sass >= 1.35.0 has the option quietDeps 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.

Rails professionals since 2007

Our laser focus on a single technology has made us a leader in this space. Need help?

• We build a solid first version of your product
• We train your development team
• We rescue your project in trouble

Read more Show archive.org snapshot

You might have seen deprecation warnings like this during assets compilation:

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

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 silence 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:

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

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:

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

For esbuild, add quietDeps: true to the plugin options, like so:

esbuild.build({
  // ...
  plugins: [
    sassPlugin({
      quietDeps: true,
      // ...