CODEWITHSUNDEEP
nuxt.jsconfigaliasnuxt3.js
Matej
Matej

Reputation: 261

Nuxt3 aliases for directories in nuxtconfig

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?

Upvotes: 1

Views: 6682

Answers (1)

Diand
Diand

Reputation: 195

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!

Upvotes: 2

Related Questions