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

Question

[Андрей Чирков]

Переменные работают в 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-переменные?

Comments

[Антон Антон]

А если отдельным файлом именно как css (не scss)?

[Андрей Чирков]

Антон Антон, в общем временно сделаю так: css отдельно, scss отдельно, без импортов дополнительных

export default defineNuxtConfig({
  css: [
    "~/assets/styles/vars.css",
    "~/assets/styles/reset.css",
    "~/assets/styles/override-datepicker.css",
    "~/assets/styles/override-select.css"
  ],
  modules: ["@pinia/nuxt", "@formkit/nuxt"],
  buildModules: [],
  build: {
    transpile: ["@vuepic/vue-datepicker", "maska", "date-fns"]
  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData:
            '@import "./assets/styles/adaptive.scss"; @import "./assets/styles/fonts.scss"; @import "./assets/styles/buttons.scss"; @import "./assets/styles/global.scss";'
        }
      }
    }
  }
})

В доке накста такое:

css: [
  // Load a Node.js module directly (here it's a Sass file).
  'bulma',
  // CSS file in the project
  '@/assets/css/main.css',
  // SCSS file in the project
  '@/assets/css/main.scss'
]

А по факту если делать по доке, то в main не будет работать адаптивка, которая импортируется в additionalData

Короче пока что я устал делать ребилд проекта, чтобы проверить гипотезы

[ijesusyt]

Похоже, вы пытаетесь сделать глобальные переменные CSS доступными в своем проекте Nuxt 3, но они не работают при сборке и предварительном просмотре проекта.

Одной из потенциальных причин этой проблемы может быть то, что вы используете функцию defineNuxtConfig из модуля @pinia/nuxt для определения вашей конфигурации Nuxt, но эта функция неправильно распространяет свойство css на результирующий объект конфигурации. В результате глобальные переменные CSS, определенные в вашем файле global.scss, не загружаются при сборке проекта.

Чтобы решить эту проблему, вы можете попробовать импортировать файл global.scss непосредственно в массив css объекта конфигурации Nuxt, например:

export default {
  css: [
    "~/assets/styles/global.scss",
    "~/assets/styles/adaptive.scss"
  ],
  modules: ['@pinia/nuxt', '@formkit/nuxt'],
  buildModules: [],
  build: {
    transpile: ['@vuepic/vue-datepicker', 'maska', 'date-fns']
  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "./assets/styles/adaptive.scss";'
        }
      }
    }
  }
}

Это должно гарантировать правильную загрузку глобальных переменных CSS при сборке проекта.

В качестве альтернативы вы можете попробовать определить глобальные переменные CSS в отдельном файле и импортировать этот файл в свой файл global.scss с помощью директивы Dmitrijs Balcers, например:

// vars.scss
:root {
  --black: #333742;
  --blue: #1753FF;
  // ...
}

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