我可以导出Sass变量并将其导入Angular Typescript变量吗？

Question

我已经看了一段时间了。我现在有我的应用程序。我们在scss中定义了用于着色的变量。我正在尝试将变量导入Typescript，以便可以将其提交到服务器。

我的Angular组件中有一堆字体和颜色字符串，但是我想将它们推入用于设计的scss文件中。问题是我不知道如何获取颜色。

我看到有些人在Javascript中做类似的事情，但是我目前无法在Typescript中复制它。

理想情况下，我想这样做：

Scss：

:export { myVariable:#ffffff; }

NGTypescript：

import {styles} from "./styles.scss";

，然后执行类似以下操作：

onPostRequest(){ let color = styles.myVariable; ... }

当我到达上面的导入行时，它将显示：找不到模块'./icon-picker.component.scss'.ts(2307）

我在类似React的类似示例中看到了类似的示例，但是我也遇到了将该概念移植到Angular的问题。 https://github.com/css-modules/css-modules/issues/86显示了我注意到的概念。这也是一个Javascript演练，似乎也存在以下问题：https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

Answer 1

您是否尝试过将颜色定义为src / styles.scss中的变量，将它们与CSS选择器链接起来，并在组件html文件中引用这些选择器？

例如：

$primary-color: #333;
$secondary-color: #777;
.primary-color {
   color: $primary-color;
}
.secondary-color {
   color: $secondary-color;
}

然后在您的html组件中：

<p class="primary-color">Text with primary color</p>
<p class="secondary-color">Text with secondary color</p>

出于您的兴趣，您还可以通过重命名* .css并更新组件ts文件中的StyleUrls引用，将组件css更改为scss。