Angular CLI：如何将SCSS变量导入JavaScript

我正在编写一个Angular 2组件来创建自定义网格布局。SCSS变量位于名为

\u variables.SCSS

的SCSS文件中。我想在JavaScript中访问这些变量。我注意到了一些npm工具，例如，但不知道如何在Angular2项目中实现它

$tile-margin: 20px;
$tile-width: 200px;
$tile-height: 250px;

---

编写一个服务非常容易，它将使用Http.get

Http.get加载原始scss文件，然后通过与变量定义匹配的正则表达式传递结果，但是

但老实说，我认为你找错了方向，需要重新考虑设计。如果已经编译了scss变量（以及使用它们的CSS类）并在客户端中可用，为什么要手动应用样式

为什么你不能定义你自己的CSS类来映射到你的网格系统，然后设置一个绑定到宿主元素
class
来绑定它们呢？这有点难看，因为
ngClass
是一个指令，所以不能绑定到宿主元素上，但它是可行的

以引导
列--
格式为例：

导出类型屏幕宽度='xs'|'sm'|'md'|'lg'；
@指示({
选择器：`div[gridColumn]`，
主持人:{
“[attr.class]：”主机类。加入（“”）
},
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类GridColumn{
@输入（'gridColumn'）屏幕宽度：屏幕宽度='md'；
@Input（）colSpan:number=1；
构造函数（私有_主机：ElementRef）{}
获取主机类（）：数组{
让existingClasses=this.\u host.nativeElement.classList
.filter（cls=>！/^col-/.test（cls）
返回[
…现有的类，
`col-${this.screenWidth}-${colSpan}`
];
}
}

然后，使用情况将是：

 <div gridColumn="xs" [colSpan]="4"></div>



老实说，它的可读性与
差不多，所以为什么要麻烦呢？
谢谢你的评论。我使用的是一个非常非标准的网格。不是所有的瓷砖都是1x1，所以我将添加CSS类，如left-2和top-3，以应用于瓷砖元素，以最适合的顺序排列它们。如果我决定更改瓷砖宽度或宽度边距宽度，我不希望代码出现在多个地方。请注意，原始SCSS文件也被WebPackAh捆绑在一起，我明白了。我仍然需要定义自己的SCSS类，并使用指令将它们动态绑定到主机。这样，您不仅可以将所有代码放在一个地方，还可以拥有自己的风格此外，您还可以对它们应用现有的媒体查询，这在定义网格时总是很有用的。