将CSS变量导入到Typescript文件中

Question

我们创建了一个theme.css：root文件，其中包含许多常用变量，可用于我们应用程序的其他各种.css文件。

但是我们的一些旧代码具有类似的设置，但是在带有一些变量的theme.ts文件中。我想从我们的主题中导入变量。css到我们的主题中。ts，以便可以从该单个css文件中操作所有内容。

我已经检查了一些链接，例如中等的this article，这里的stackoverflow是this answer，但没有骰子。

我想看看我是否可以使它工作，所以我做了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

因此，我认为我的变量调用方法错误，或者也许我确实需要导入外部依赖关系？谢谢，如果您需要其他任何信息，请告诉我。

编辑**这是我尝试过的其他尚未解决的问题。我很兴奋，因为我认为它有效。但是没有。

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')

---

编辑**这里忘记了一些重要信息。 theme.css通过mobx状态树从我们的api获取其值：

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工作表中，对吧？或在模型上查看。

编辑**仍在处理此问题。但是我之前没有将MST导入到普通的js / ts文件中。仅具有将其导入组件的经验。我一直在寻找各种资源，但是如果有人能指出正确的方向，我将非常感激

Answer 1

我建议使用CSSModules。

此软件包可以（除其他外）exactly what you described