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

[Anonymous]

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

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

Я просмотрел несколько ссылок, например эту статью на Medium и этот ответ здесь, на 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. Есть только опыт импорта его в компоненты. Я просматривал различные ресурсы, но если кто-нибудь может указать мне правильное направление, я буду очень признателен

Подробнее здесь: https://stackoverflow.com/questions/543 ... cript-file