Nuxt - importing Buefy manually results in Dart Sass warning

[mitya33]

I slowly figured out that the only (?) way to customise Bulma vars when using Buefy/Bulma in Nuxt is to set css: false in Buefy's entry in the Nuxt config, and instead load Buefy/Bulma myself, having first set some variables. Like so:

nuxt.config.js

    css: [
        '~/assets/css/buefy-init.sass'
    ],

buefy-init.sass

$danger: gray
@import "~bulma/bulma"
@import "~buefy/src/scss/buefy"

However, the second @import ... line causses the following warning during build:

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(str-length($svg), $slice)

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

$loops: ceil(str-length($svg)/$slice);
                  ^^^^^^^^^^^^^^^^^^^^^^^

    node_modules\buefy\src\scss\utils\_functions.scss 17:18      svg-encode()
    node_modules\buefy\src\scss\utils\_functions.scss 40:13      checkmark()
    node_modules\buefy\src\scss\components\_checkbox.scss 38:67  @import
    node_modules\buefy\src\scss\buefy.scss 5:9                   @import
    assets\css\buefy-init.sass 4:9                               root stylesheet

Perhaps this is why Nuxt recommends Sass v.10, not the latest. (In something that may or may not be related to the above, the latest Sass suggests @use rather than @import, but doing that results in other, more fatal errors.)

[kissu]

Yep, @use is better than @import but it uses sass (dart-sass) and not node-sass.

[mirocklez]

Using @use insted of @import is not related with the division warnings - it is just the new way of working with Sass. On the topic

You can silence these warnings:

build: {
    // Silence deprecation warnings for dart-sass
    // https://sass-lang.com/documentation/js-api#quietdeps
    loaders: {
      scss: {
        sassOptions: {
          quietDeps: true,
        },
      },
    },
  },

And this error (that is noted in the issue) has been fixed already: https://github.com/buefy/buefy/commit/c0339de5d9804feee772de2b409ed871e31a8581

So probably @jtommy can close this one.