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

Posted 2023-03-07

【中文标题】我可以导出 Sass 变量并将它们导入 Angular Typescript 变量吗？

【英文标题】：Can I export Sass variables and import them into a Angular Typescript variables?

【发布时间】：2019-06-03 12:51:34

【问题描述】：

我一直在看这个。我现在有我的申请。我们在 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

【问题讨论】：

您是否尝试过使用 [style] 或 [ngClass] 来创建样式绑定到您的 .ts。 ?

我遇到的问题不在于 UI，而是需要将颜色提交到服务器的不可避免的状态。因此，如果我使用类，我如何从类中获取 color 的值。现在我正在使用样式做：[style]="'color': myColorVar" 并在我的 TS 中有 myColorVar，但我认为颜色和任何面向 UI 的东西都应该抽象到 scss 文件中，以便于更新应用程序的一致性，而不是奇怪的小利基ui 颜色差异被忽略。

【参考方案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。

【讨论】：

我试图得到的问题是将颜色提交到服务器，所以我试图弄清楚如何将$primary-color 存储在 js 变量中以便将其提交到有效负载中。