Nuxt•6mo ago

Silence SASS deprecation warnings

While hopefully... trying to migrate from Nuxt v2.14 to v2.17, I am also changing node-sass to sass, When I ran NODE_ENV='--openssl-legacy-provider' npx nuxt2 build --modern=client, I am getting expected SASS deprecation warnings like:

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter, 12) or calc($grid-gutter / 12)

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

   ╷
63 │     'xs': $grid-gutter / 12,
   │           ^^^^^^^^^^^^^^^^^
   ╵
    node_modules/vuetify/src/styles/settings/_variables.scss 63:11  @import
    node_modules/vuetify/src/styles/settings/_index.sass 1:9        @import
    node_modules/vuetify/src/styles/styles.sass 2:9                 @import
    node_modules/vuetify/src/components/VGrid/VGrid.sass 1:9        root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter, 12) or calc($grid-gutter / 12)

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

   ╷
63 │     'xs': $grid-gutter / 12,
   │           ^^^^^^^^^^^^^^^^^
   ╵
    node_modules/vuetify/src/styles/settings/_variables.scss 63:11  @import
    node_modules/vuetify/src/styles/settings/_index.sass 1:9        @import
    node_modules/vuetify/src/styles/styles.sass 2:9                 @import
    node_modules/vuetify/src/components/VGrid/VGrid.sass 1:9        root stylesheet

I have added quiteDeps to Nuxt configuration build options:

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  build: {
    bridge: {
      typescript: false,
      nitro: false,
    },
    // ...
    loaders: {
      sass: {
        sassOptions: {
          quietDeps: true
        }
      },
      scss: {
        sassOptions: {
          quietDeps: true
        }
      }
    },
    // ...

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  build: {
    bridge: {
      typescript: false,
      nitro: false,
    },
    // ...
    loaders: {
      sass: {
        sassOptions: {
          quietDeps: true
        }
      },
      scss: {
        sassOptions: {
          quietDeps: true
        }
      }
    },
    // ...

Nevertheless, it still outputs the warnings. What is the correct way to silence those at least temporarily while... hopefully... migrating to new Nuxt, Vue, TypeScript, and then... Vuetify? I would appreciate a clarification/suggestion whether it's even possible without upgrading to Vuetify 3 or downgrading SASS, where current versions:

$ yarn list --pattern 'sass';
yarn list v1.22.19
├─ @nuxtjs/vuetify@2.0.0-beta.2
│  └─ sass-loader@8.0.2
├─ @types/node-sass@4.11.7
├─ postcss-sass@0.4.4
├─ sass-loader@10.5.2
├─ sass@1.75.0
└─ stylelint-config-rational-order@0.1.2
   └─ postcss-sass@0.3.5
Done in 0.66s.

$ yarn list --pattern 'sass';
yarn list v1.22.19
├─ @nuxtjs/vuetify@2.0.0-beta.2
│  └─ sass-loader@8.0.2
├─ @types/node-sass@4.11.7
├─ postcss-sass@0.4.4
├─ sass-loader@10.5.2
├─ sass@1.75.0
└─ stylelint-config-rational-order@0.1.2
   └─ postcss-sass@0.3.5
Done in 0.66s.

1 Reply

Artfaith•6mo ago

I know those are quite outdated, but... it's been days since I am trying to update this project not started by me am being mostly in back-end even (still learning ineffably marvelous Nuxt, Vue...)... I am not sure how much time will it require, and hence am trying to update it step by step. Since this change is SASS v1.33, I have installed "sass": "~1.32" as also suggested in the mentioned GitHub issue comment, but am still getting the warnings... I see...

$ yarn list --pattern 'sass'
yarn list v1.22.19
├─ @nuxtjs/vuetify@2.0.0-beta.2
│  ├─ sass-loader@8.0.2
│  └─ sass@1.75.0
├─ @types/node-sass@4.11.7
├─ postcss-sass@0.4.4
├─ sass-loader@10.5.2
├─ sass@1.32.13
└─ stylelint-config-rational-order@0.1.2
   └─ postcss-sass@0.3.5
Done in 0.69s.

$ yarn list --pattern 'sass'
yarn list v1.22.19
├─ @nuxtjs/vuetify@2.0.0-beta.2
│  ├─ sass-loader@8.0.2
│  └─ sass@1.75.0
├─ @types/node-sass@4.11.7
├─ postcss-sass@0.4.4
├─ sass-loader@10.5.2
├─ sass@1.32.13
└─ stylelint-config-rational-order@0.1.2
   └─ postcss-sass@0.3.5
Done in 0.69s.

I'll try setting a Yarn resolution for Vuetify to SASS ~1.32. Interesting... I added the following Yarn resolution to package.json

"resolutions": {
  "@nuxtjs/[email protected]/sass": "~1.32"
}

"resolutions": {
  "@nuxtjs/[email protected]/sass": "~1.32"
}

Removed node_modules and yarn.lock, and with yarn install, it still returns the same SASS version 1.75.0 for Vuetify, but the required is ~1.32. What might it be?

Gaming

Programming

Silence SASS deprecation warnings