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

Question

我一直在看这个。我现在有我的申请。我们在 scss 中定义了用于着色的变量。我正在尝试将变量导入 Typescript，以便将它们提交到服务器。

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

我看到有人在 Javascript 中做类似的事情，但我目前无法在 Typescript 中重现它。

理想情况下，我想做：

文字：

: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。