Using sass `@use` on vue project

I have a Vue only project and I am using Sass for styling. Currently, I have a Sass mixin defined as shown below; the code is simple because I am testing if it works only.

@mixin border {
  border-radius: 1px;
}

I also have a component file where I create button components, and that's where I want to @use my border mixin:

@use "../abstracts/variables" as v;
@use "../abstracts/mixins" as m;

@mixin ripple-effect($bg-color: $text) {
  background-position: center;
  transition: background 0.6s;
  &:hover {
    background: rgba($bg-color, 0.6) radial-gradient(circle, transparent 1%, $bg-color 1%);
    background-size: 15000%;
    background-position: center;
  }
  &:active {
    background-color: rgba($bg-color, 0.6);
    background-size: 100%;
    transition: background 0s;
  }
}

.ui-icon-button {
  --border-width: 1px;
  @include border; // here is I use the mixin

  border-radius: 90px;
  border-style: solid;
  border-width: var(--border-width);
  cursor: pointer;
  padding-block: calc(8px - var(--border-width));
  padding-inline: calc(22px - var(--border-width));
  position: relative;
  &[aria-current="true"] {
    @include ripple-effect($light-green);
    background-color: $light-green;
    border-color: $light-green;
    color: white;
  }
  &:not([aria-current]) {
    @include ripple-effect;
    background-color: transparent;
    border-color: $gray;
    color: $gray;
  }
  & * {
    margin-right: 6px;
  }
}

The first @use, the one for the variables, works ok, but the second doesn't work at all, and raises the following error:

./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5275f051","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/pages/TheUI.vue
Module build failed: 
  @include border;
          ^
      No mixin named border
      in proj_name/src/assets/scss/components/_buttons.scss (line 21, column 12)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5275f051","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/pages/TheUI.vue 4:14-370 13:3-17:5 14:22-378
 @ ./src/pages/TheUI.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

I know you might be thinking that I should be calling my mixin properly, using its namespace (like @include m.border()), but that changes nothing. It's a second problem that I'd like to address: namespacing my Sass modules simply don't work. When I try doing that, it raises the following error:

./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5275f051","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/pages/TheUI.vue
Module build failed: 
@mixin ripple-effect($bg-color: v.$text) {
                                ^
      Invalid CSS after "...ct($bg-color: v": expected expression (e.g. 1px, bold), was ".$text) {"
      in /home/bernardo/Documentos/Projetos/brsbet_webapp_2023/src/assets/scss/components/_buttons.scss (line 4, column 34)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5275f051","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/pages/TheUI.vue 4:14-370 13:3-17:5 14:22-378
 @ ./src/pages/TheUI.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

LaryAI

3 years ago

Level 58

The issue is that the @use directive is not supported in the version of Sass being used. The @use directive was introduced in Sass 3.10, and Vue CLI currently uses Sass 3.9. To use the @use directive, you can either upgrade to a newer version of Sass or use a different syntax for importing mixins.

To import mixins using the older syntax, you can use the @import directive. For example, to import the border mixin from the mixins file, you can use the following code:

@import "../abstracts/mixins";

.ui-icon-button {
  --border-width: 1px;
  @include border;

  // rest of the code
}

Note that when using the @import directive, you don't need to specify the file extension (e.g. .scss). Also, make sure that the path to the file is correct.

If you want to use the @use directive, you can upgrade to a newer version of Sass. To do this, you can install the sass package using npm:

npm install sass

Then, update your vue.config.js file to use the sass-loader instead of the node-sass package:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'),
        sassOptions: {
          fiber: require('fibers'),
        },
      },
    },
  },
};

After making these changes, you should be able to use the @use directive in your Sass files:

@use "../abstracts/mixins" as m;

.ui-icon-button {
  --border-width: 1px;
  @include m.border;

  // rest of the code
}

BernardoBF4

3 years ago

Level 4

@LaryAI As far as I've checked Sass is on version 1.62 now, so there isn't a version 3.10 for me to install.

Please or to participate in this conversation.