1

I would like to create aliases for some directories in a Nuxt 3 project, however, I was not able to make them work just from the information provided in the documentation.

I've tried registering them like this:

export default defineNuxtConfig({
    alias {
        "@scss": "/<rootDir>/assets/scss",
    }
})

as well as like this:

import {fileURLToPath} from "url";

export default defineNuxtConfig({
    alias {
        "@scss": fileURLToPath(new URL('./assets/scss', import.meta.url)),
    }
})

and then using them in vue components like this:

<style lang="scss">
@use "~@sass/............";    // one way (because the documentation says sth about prefixing it with '~'

@use "@sass/............";
</style>

and as you can probably imagine, it did not work .

What is the proper way to register an alias for a folder and then use it in css, javascript & template markup?

Jimmar
  • 4,194
  • 2
  • 28
  • 43
Matej
  • 155
  • 1
  • 15

1 Answers1

1

I think that you should use dart-sass instead of node-sass package since it doesn't support the @use method. Also install url if it's not already there and import fileURLToPath explicitly in your nuxt.config file.

import {fileURLToPath} from 'url';

I made an example here

Hope it helps!

Diand
  • 105
  • 2
  • 11
  • Thanks! So the second example I provided was correct... strange that it didn't work for me when I tried it before - but now it works! – Matej Dec 27 '22 at 12:58