在Angular组件中导入sass变量文件，最好的方法是什么？

Question

我在_var.scss文件夹中创建了一个src/assets文件，我想在应用程序的每个组件中使用这些变量，我的问题是将这个文件导入每个组件是否正确？我觉得我以这种方式重复自己，无法将其仅导入一个地方并在所有组件中使用吗？

Answer 1

您可以使用css自定义属性代替sass变量。

这样，您可以在所有组件中访问这些值。

有关如何定义CSS自定义属性的示例，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables。

Answer 2

仅 @import个scss变量不会造成任何危害，因为在ng build中，由于预处理器的存在，它们将不存在（它们会在需要的地方填充） 。

您应该提防放置（@import）全局样式。它们将被加载到每个导入的组件中，而您的css将膨胀。您可以看到，如果您ng build prod并查看包含全局样式的组件的样式。