andreichirkov
@andreichirkov
Frontend разработчикк

Как сделать доступными глобальные CSS-переменные в Nuxt 3 при Build?

Переменные работают в DEV режиме
Если сделать npm run build
А потом npm run preview то переменные больше не работают на страницах и в компонентах

К слову все это работает в Nuxt 2,
в Nuxt 3 не работает и судя по поиску в гугле складывается впечатление что Nuxt 3 проект никто не билдил вообще :)

nuxt.config.ts
export default defineNuxtConfig({
  css: ["~/assets/styles/global.scss"],   <--ИМПОРТИРУЕМ ГЛАВНЫЙ ГЛОБАЛЬНЫЙ SCSS ФАЙЛ
  modules: ['@pinia/nuxt', '@formkit/nuxt'],
  buildModules: [],
  build: {
    transpile: ['@vuepic/vue-datepicker', 'maska', 'date-fns']
  },
  // plugins: ['~/plugins/autoAnimate.js'],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "./assets/styles/adaptive.scss";  <-- отдельный импорт миксина с адаптивкой
        }
      }
    }
  }
})


global.scss
@import "vars";
@import "fonts";
@import "reset";
@import "buttons";

эти переменные должны быть доступны везде, но по факту нет
если засунуть их в vars ничего не меняется
:root {
  --black: #333742;
  --blue: #1753FF;

  --blue-datepicker: #F2F5FC;

  --gray-lightest: #F9FAFF;
  --gray-light: #E7E9F2;

  --gray-dark: #757A89;

  --purple-dark: #E4EAFF;
  --purple-light: #F2F6FF;

  --content-width: 1170px;
}


Кто то решал подобную проблему?
Или просто переделать все в scss-переменные?
  • Вопрос задан
  • 64 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы