Size: a a a

Nuxt.js — русскоговорящее сообщество

2020 July 28

Д

Деда in Nuxt.js — русскоговорящее сообщество
Деда
Ребята у меня вопрос есть, не совсем по наксту, ну что то больше и негде его задать прямо сейчас.

У меня есть верстка в bootstrap
я ее дополняю своими двумя вариантами
theme-light.scss
theme-dark.scss

и подключаю пока в css один их этих файлов

планировал в дальнейшем что я заявяжу это все на body class="theme-light" или body-class="theme-dark" и буду на лету переключать

но что то сейчас когда подошел так и не понял как это сделать, как все bootstrap стили обернуть классом, типа

.theme-light {
  include 'theme_light'
}

.theme-dark {
  include 'theme_dark'
}

Никто не возился с похожим?
Простите что я вас этим мучаю, не у кого нет случаем идей?
источник

SC

Sheldon Cooper in Nuxt.js — русскоговорящее сообщество
Roma
почему-то сам nuxt не подхватывает их в докере и не передает в приложение
докер - это лишь среда выполнения
для Nuxt нужна Node переменные в которой тебе и нужно сконфигурировать в этом самом докере и этой ноде - тебе нужно сделать например:
NODE_ENV = production
ты можешь сделать это в разных местах, даже руками в консоли
обычно эта команда стоит в package.json перед командой nuxt start
источник

R

Roma in Nuxt.js — русскоговорящее сообщество
да, но потом так же на бинстоке можно дописать переменные окружения чтобы их динамически менять к примеру или просто для разных енваирементов использовать разные переменные
источник

R

Roma in Nuxt.js — русскоговорящее сообщество
у самого докера если законнектиться по ssh есть все эти переменные, но.в приложении нет
источник

SC

Sheldon Cooper in Nuxt.js — русскоговорящее сообщество
Roma
да, но потом так же на бинстоке можно дописать переменные окружения чтобы их динамически менять к примеру или просто для разных енваирементов использовать разные переменные
менять то можно НО необходимо помнить, что значения переменных окружения зашиваются в web-приложение хардкодом ТОЛЬКО в момент сборки по команде npm run build и больше не меняются никогда, пока nuxt не будет остановлен и пересобран заново.
источник

R

Roma in Nuxt.js — русскоговорящее сообщество
так я их на стороне сервера использую
источник

R

Roma in Nuxt.js — русскоговорящее сообщество
это же ssr все-таки)
источник

SC

Sheldon Cooper in Nuxt.js — русскоговорящее сообщество
Roma
так я их на стороне сервера использую
вот вы их изменили на стороне вашего сервера, пересоберите - они поменяются.
источник

d

dsgnrvd in Nuxt.js — русскоговорящее сообщество
если я выберу статику, то у меня будет генерироваться просто папочка dist, откуда я смогу при помощи nginx вывесить файлы всему миру. получается так?
источник

TK

Taras Khvyl in Nuxt.js — русскоговорящее сообщество
Деда
Ребята у меня вопрос есть, не совсем по наксту, ну что то больше и негде его задать прямо сейчас.

У меня есть верстка в bootstrap
я ее дополняю своими двумя вариантами
theme-light.scss
theme-dark.scss

и подключаю пока в css один их этих файлов

планировал в дальнейшем что я заявяжу это все на body class="theme-light" или body-class="theme-dark" и буду на лету переключать

но что то сейчас когда подошел так и не понял как это сделать, как все bootstrap стили обернуть классом, типа

.theme-light {
  include 'theme_light'
}

.theme-dark {
  include 'theme_dark'
}

Никто не возился с похожим?
можно через переменные указать разные цвета для тем и от этого уже плясать. типо

html[data-theme='dark'] {
  background: var(--lightBg);
 --lightBtn: #FFBD07;
 --lightBg: #232323;
 --lightColor: #fff;
}
источник

SC

Sheldon Cooper in Nuxt.js — русскоговорящее сообщество
Roma
это же ssr все-таки)
ssr nuxt-a не отслеживает изменения ваших переменных окружения и не пересобирается автоматически из-за них.
источник

Д

Деда in Nuxt.js — русскоговорящее сообщество
Taras Khvyl
можно через переменные указать разные цвета для тем и от этого уже плясать. типо

html[data-theme='dark'] {
  background: var(--lightBg);
 --lightBtn: #FFBD07;
 --lightBg: #232323;
 --lightColor: #fff;
}
это знаю да, но у меня готовые две bootstrap темы
источник

Д

Деда in Nuxt.js — русскоговорящее сообщество
как же не хочется переделывать все
источник

R

Roma in Nuxt.js — русскоговорящее сообщество
ну первый проект работает как-то
источник

Д

Деда in Nuxt.js — русскоговорящее сообщество
такого плана
источник

R

Roma in Nuxt.js — русскоговорящее сообщество
понятное дело он рестартует сервер чтобы новые перменные взять
источник

R

Roma in Nuxt.js — русскоговорящее сообщество
но хотя бы прокидывает их
источник

TK

Taras Khvyl in Nuxt.js — русскоговорящее сообщество
Деда
как же не хочется переделывать все
нуу, так почему просто в зависимости от класса или атрибута темы не подключать разные файлы с переменными темы?
источник

Д

Деда in Nuxt.js — русскоговорящее сообщество
css: [
   '~/assets/scss/theme-light.scss',
   // '~/assets/scss/theme-dark.scss',
   '~/assets/scss/app.scss',
 ],

я их просто в nuxt.config.js подключаю
источник

Д

Деда in Nuxt.js — русскоговорящее сообщество
оно мне и компилит их сразу
источник