Using @use "sass:math" in a Vue component

Question

In a Nuxt project i have created a button component with the following style:

<style lang="scss">
  .my-button {
    // lots of cool styles and stuff here
    $height: 28px;
    height: $height;
    border-radius: $height / 2;
    }
  </style>

The problem is the border-radius: $height / 2; line gives this warning:

    ╷
182 │     border-radius: $height / 2;
    │                    ^^^^^^^^^^^
    ╵
    components/MyButton.vue 182:20  button-size()
    components/MyButton.vue 186:5   root stylesheet

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

Recommendation: math.div($height, 2)

It also links to this page describing the deprecation.

However if i add @use "sass:math" to the top of my style tag like so:

  <style lang="scss">
    @use "sass:math";
    //Cool styles and stuff
    $height: 28px;
    height: $height;
    border-radius: math.div($height, 2);
  </style>

I get this error:

 [Vue warn]: Error in render: "Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                                              12:13:59
SassError: @use rules must be written before any other rules.
    ╷
102 │ @use "sass:math";
    │ ^^^^^^^^^^^^^^^^
    ╵
  components/MyButton.vue 102:1  root stylesheet"

I think i need to add the import of @use "sass:math" somewhere in nuxt.config.js file to load it in all components or similar, but i am not able to figure out where.

The css related blocks in my nuxt.config.js currently looks like:

  build: {
    postcss: {
      plugins: {
        'postcss-easing-gradients': {},
      },
    },
  },
  styleResources: {
    scss: [
      '~/assets/global-inject.scss',
    ],
  },
  css: [
    '~/assets/base.scss',
    '~/assets/reset.scss',
  ],

Answer 1

Updating @nuxtjs/style-resources to above version 1.1 and using hoistUseStatements fixed it.

I changed the styleResources object in nuxt.config.js to:

styleResources: {
    scss: [
      '~/assets/global-inject.scss',
    ],
    hoistUseStatements: true,
  },

and added @use "sass:math"; to the top of global-inject.scss.

Answer 2

Updated answer

What if you try this in your nuxt.config.js file?

{
  build: {
    loaders: {
      scss: {
        additionalData: `
          @use "@/styles/colors.scss" as *;
          @use "@/styles/overrides.scss" as *;
        `,
      },
    },
  ...
}

Or you can maybe try one of the numerous solutions here: https://github.com/nuxt-community/style-resources-module/issues/143

---

Plenty of people do have this issue but I don't really have a project under my belt to see what is buggy. Playing with versions and adding some config to the nuxt config is probably the way to fix it yeah.

---

Also, if it's a warning it's not blocking so far or does it break your app somehow?

---

Old answer

My answer here can probably help you: https://stackoverflow.com/a/68648204/8816585

It is a matter of upgrading to the latest version and to fix those warnings.