Update sass to ^1.94.0 and silence Bootstrap deprecation warnings

[Copilot]

Sass versions >1.77.6 emit deprecation warnings for Bootstrap's use of @import, legacy color functions, and global built-ins. Updated to ^1.94.0 and configured webpack to suppress these warnings.

Changes

• package.json: Updated sass from 1.77.6 to ^1.94.0
• config/webpack/webpack.config.js: Inject silenceDeprecations into sass-loader options

Implementation

The webpack config now programmatically adds suppression options to the sass-loader generated by shakapacker:

const webpackConfig = generateWebpackConfig()

// Find sass-loader and inject silenceDeprecations
webpackConfig.module.rules.forEach(rule => {
  if (rule.test?.toString().includes('scss') && Array.isArray(rule.use)) {
    rule.use.forEach(loader => {
      if (loader?.loader?.includes('sass-loader')) {
        loader.options.sassOptions.silenceDeprecations = [
          'color-functions',
          'global-builtin', 
          'import'
        ]
      }
    })
  }
})

This approach merges cleanly with shakapacker's existing sass-loader configuration (loadPaths, quietDeps) without requiring custom webpack rule definitions.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Update sass and ignore bootstrap related warnings</issue_title>
<issue_description>Sass should be updated, however, versions > 1.77.6 will produce warnings like

WARNING in ./app/javascript/packs/application.scss (./app/javascript/packs/application.scss.webpack[javascript/auto]!=!./node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.2_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.0_webpack@5.102.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/packs/application.scss)
Module Warning (from ./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.0_webpack@5.102.1/node_modules/sass-loader/dist/cjs.js):
Deprecation Warning on line 0, column 8 of ./app/javascript/packs/application.scss:0:8:
Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

0 | @import "stylesheets/bootstrap";


app/javascript/packs/application.scss 1:9  root stylesheet

 @ ./app/javascript/packs/application.scss

WARNING in ./app/javascript/packs/application.scss (./app/javascript/packs/application.scss.webpack[javascript/auto]!=!./node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.2_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.0_webpack@5.102.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/packs/application.scss)
Module Warning (from ./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.0_webpack@5.102.1/node_modules/sass-loader/dist/cjs.js):
Deprecation Warning on line 1, column 8 of ./app/javascript/packs/application.scss:1:8:
Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

1 | @import "stylesheets/turbo-progress-bar";


app/javascript/packs/application.scss 2:9  root stylesheet

 @ ./app/javascript/packs/application.scss

webpack 5.102.1 compiled with 2 warnings in 5590 ms
[Shakapacker] Completed webpack build in 7.66s (7.66s)

The goal is update to "sass": "^1.94.0" but get rid of the warnings when compiling with bin/shakapacker

This repo uses webpack, what we need is something like this:

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // Silence some Bootstrap warnings
        // FIXME: Remove when a version of Bootstrap fixing all the warnings
        // will be released.
        silenceDeprecations: ['color-functions', 'global-builtin', 'import']
      },
    }
  },
  plugins: [
    ViteRails({
      envVars: { RAILS_ENV: 'development' },
    })
  ],
})

which works with vite</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Update sass and ignore bootstrap related warnings #1330

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coveralls]

Pull Request Test Coverage Report for Build 21746014733

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 100.0%

---

Totals
Change from base Build 21743581032:	0.0%
Covered Lines:	19
Relevant Lines:	19

---

💛 - Coveralls