javascript - 将 CSS 变量导入 Typescript 文件

Question

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

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

我检查了一些链接，比如 this article在介质上，this answer在 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')

---

edit** 在这里忘记了一些关键信息。 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