Импорт переменных CSS в файл Typescript - PullRequest
Новая
       8

Импорт переменных CSS в файл Typescript

0 голосов
/ 25 января 2019

Мы создали корневой файл theme.css: с несколькими часто используемыми переменными для использования в различных других файлах .css для нашего приложения.

Но некоторые из нашего старого кода имеют аналогичную настройку, нов файле theme.ts с некоторыми переменными.Я хочу импортировать переменные из нашей темы. css в нашу тему. ts , чтобы все можно было манипулировать из этого единственного файла CSS.

Я проверилнесколько ссылок, таких как эта статья на средних и этот ответ здесь на stackoverflow, но без кубиков.

Я хотел посмотреть, смогу ли я заставить его работатьпоэтому я сделал быстрый и грязный способ const s = require('./theme.css'), но я не смог правильно назначить переменные.

Вот theme.css 

:root {
  --primaryColor: #427ee1;
  --secondaryColor: #f2f2f2;
  --chatBackground: #fff;
  --typingAnimationDots: #427ee1;
  --typingAnimationFill: #f2f2f2;
  --userResponseColor: #427ee1;
  --fontType: 'Open Sans';
  --hoverFillColor: #306aca;
  --hoverFontColor: #f2f2f2;
}

И theme.ts с примерами каждой из моих неудачных попыток вызова имени переменной 

const s = require('./theme.css')

const botMessageBackgroud = s.secondaryColor   // returns black like its undefined
const botMessageBorder = s['--primaryColor']   // also returns black
const botMessageColor = s[':root']['--primaryColor']   // cannot read --primaryColor of undefined

Так что я думаю, что мой метод вызова переменных неправильный, или, может быть, янужно импортировать внешнюю зависимость?Спасибо, и дайте мне знать, если вам нужна какая-либо другая информация.

edit ** Вот еще кое-что, что я пробовал, но это не сработало.Я был очень взволнован, потому что я думал, что это сработало.Но это не так. 

const s = require('./theme.css')
console.log('s >>> ', s)

const callVar = (varName: string) => {
  return getComputedStyle(document.documentElement).getPropertyValue(varName)
}
const botMessageBorder = callVar('--primaryColor')
const botMessageColor = callVar('--primaryColor')

edit ** Забыли здесь важную информацию. theme.css получает свои значения из нашего API через дерево состояний mobx: 

export const BotCSS = types.model({
  chatBackground: types.optional(types.string, '#fff'),
  fontType: types.optional(types.string, 'Open Sans'),
  hoverFillColor: types.optional(types.string, '#306aca'),
  hoverFontColor: types.optional(types.string, '#f2f2f2'),
  primaryColor: types.optional(types.string, '#427ee1'),
  secondaryColor: types.optional(types.string, '#fff'),
  typingAnimationDots: types.optional(types.string, '#427ee1'),
  typingAnimationFill: types.optional(types.string, '#f2f2f2'),
  userBoxColor: types.optional(types.string, '427ee1'),
  userResponseColor: types.optional(types.string, '#fff'),
  widgetShape: types.optional(types.string, '50%')
})

export type IBotCSS = typeof BotCSS.Type

Так что я могу просто импортировать эти значения mobx в лист TS, верно?Или взгляните на модель.

edit ** все еще работает над этим.Однако я раньше не импортировал MST в простой файл js / ts.Имеется только опыт его импорта в компоненты.Я искал несколько различных ресурсов, но если кто-то может указать мне правильное направление, я действительно ценю это

...