I'm working with a Nuxt 3 project, and I'm getting the following error related to Sass mixins when I try to run the dev server:
➜ DevTools: press Shift + Alt + D in the browser (v2.5.0) 2:07:40 pm
ℹ Re-optimizing dependencies because lockfile has changed 2:07:42 pm
✔ Vite client built in 130ms 2:07:42 pm
✔ Vite server built in 2158ms 2:07:44 pm
ERROR Pre-transform error: [sass] Error: Undefined mixin. 2:07:46 pm
╷
687 │ @include button;
│ ^^^^^^^^^^^^^^^
╵
../../../../assets/styles/styles.amp.scss 687:9 @use
../../../../assets/styles/partials.scss 3:1 @use
../../../../assets/styles/globals.scss 4:13 root stylesheet
Plugin: vite:css
File: /home/rinkal/app/assets/styles/globals.scss:687:9
[sass] Error: Undefined mixin.
╷
687 │ @include button;
│ ^^^^^^^^^^^^^^^
╵
../../../../assets/styles/styles.amp.scss 687:9 @use
../../../../assets/styles/partials.scss 3:1 @use
../../../../assets/styles/globals.scss 4:13 root stylesheet
The error appears to be in my globals.scss file, where I'm trying to include a Sass mixin
@use './partials/config/colors.scss' as *;
@use './partials/config/dimensions.scss' as *;
@use './partials/config/others.scss' as *;
@use './partials/config/responsiveness.scss' as *;
@use './partials/config/texts.scss' as *;
@use './partials/config/zIndexes.scss' as *;
@use './partials.scss' as *;
@use './partials/mixins/responsiveness.scss' as *;
@use './partials/mixins/fontsAndTexts.scss' as *;
@use './partials/mixins/linksAndButtons.scss' as *;
@use './partials/mixins/other.scss' as *;
@use "./globals/fonts" as *;
@use "./globals/thirdParty" as *;
@use './styles.amp.scss' as *;
Here is my GitHub repo https://github.com/Rinkal-2024/nuxt3