将CSS变量导入到Typescript文件中

Question

我们创建了一个 theme.css :root 文件，其中包含许多常用变量，可以在我们应用的各种其他 .css 文件中使用。

但是我们一些较旧的代码也有类似的设置，但是在 theme.ts 文件中有一些变量。我想从我们的 theme.css 中导入变量到我们的 theme.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

我在思考我的变量调用方法是否有误，或者我是否需要导入外部依赖？谢谢，如果您需要任何其他信息，请告诉我。

编辑** 这是我尝试过的另一种方法，但它并没有成功。起初我很兴奋，因为我以为它有效了。但事实并非如此。

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文件中。只有将其导入组件的经验。我一直在查看一些不同的资源，但如果有人能指点我正确的方向，我会非常感激。

- mdb

Answer 1

我建议使用CSSModules。

这个包可以做（除了其他功能之外）正好你所描述的功能。

- yuval.bl