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

Question

In a Nuxt 2 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',
  ],

kissu · Accepted Answer · 2021-09-13 12:47:45Z

4

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.

edited Sep 13, 2021 at 12:47

answered Sep 13, 2021 at 10:35

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lars Over a year ago

Well your answer explains the problem, my question is more related to how i solve it. Specifically in Vue components in a Nuxt setup. I have fixed the warnings coming from .scss-files, but not managed to fix them in my components.

kissu Over a year ago

@Lars you're talking about the Using / for division is deprecated and will be removed in Dart Sass 2.0.0 issue or the @use rules must be written before any other rules one?

Lars Over a year ago

@use rules must be written before any other rules is the "main" issue. The rest of the question was primarily for describing how i got there.

Lars · Accepted Answer · 2021-09-14 08:40:37Z

4

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.

edited Sep 14, 2021 at 8:40

answered Sep 13, 2021 at 15:11

Lars

7985 silver badges21 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Updated answer

Old answer

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Updated answer

Old answer

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related