Як підключити stylus mixins в Nuxtjs 3

Для того щоб підключити stylus mixins в Nuxtjs 3, щоб вони були доступні у всіх компонентах, вам необхідно імортувати ваш файл mixins в nuxt.config.ts/.js в графу vite. 

vite: { 
    css: {
      preprocessorOptions: {
        stylus: {
          additionalData: `@import "${resolve(__dirname, './')}/assets/styl/_options.styl";`
        }
      }
    }
}

Функція resolve взята з стандартного пакету path Nodejs: 

import { resolve } from 'path'
import path from 'path'

Міксіни, які підключені в _options.styl будут автоматично доступні на всіх сторінках і компонентах, включно ви можете використовувати nib, який можете підключити в _options.styl:

@import "nib"

Важливо!

Також на деяких версіях (особливо старих Nuxtjs3 < 3.8), можуть виникати проблеми, якщо не прописати в компоненті тег <style lang="stylus">...</style>, з будь яким кодом в середені, то vite буде все одно намагатися імпортувати міксини, але вже в код <script setup>, що в свою чергу викликає помилку імпорта. Тому якщо у вас стара версія накста, просто у всіх компонентах вам доведеться прописувати хочаб пустий style. (або оновіть накст до останьої версії)