TLDR: 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.
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
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:
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:
"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,
// ...
