Angular 5资产路径变量

Question

我有一个图像(即徽标(，该图像将用于各种组件。

我的文件夹结构看起来与此相似：

src/
    app/
        component1/
            component1.component.ts
            ...
        component2/
            sub-component1/
                sub-component1.component.ts
                ...
            component2.component.ts
            ...
    assets/
        img/
            logo.jpg
        icons/
    styles.scss

是否有一种简单的方法可以将资产/IMG文件夹的路径存储在scss/sass变量中，以便能够访问 logo.jpg 文件，而无需在各种组件中放置不同的相对路径？

我要问的原因是我想根据主题来交换图像，这是我在此处实现的。当我的项目被编译后，插入背景图像的变量：url(...(属性具有指定的路径，该路径对所有组件都无法正常工作。

我可以想象，这也会极大地帮助其他方案。

Answer 1

此答案中可能的其他解决方案：您可以存储通往资产文件夹的路径：

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;

然后您可以更改该变量的值。

Answer 2

，所以看来tslint把我扔掉了。

在我的主题本身中，我存储了变量：

$logo-path: url('assets/img/logo.jpg');

然而，tslint强调了这是一个错误的路径，因为它无法找到相对于主题本身的路径的图像，因此，在编译时，它将这条路径评估为不正确我的实际组件级样式表。

要解决此问题，相反，我在变量中有一串路径，并且在我的组件级样式表中评估了实际的URL。

$logo-path: 'assets/img/logo.jpg'

在我的组件级别样式中：

.class-name{
    background-image: url(#{$logo-path});
}

可悲的是，有人指出我可以直接使用资产文件夹来回答我的问题，而我实际上并没有尝试使用通往资产文件夹的直接路径来构建，假设TSlint在无效的路径上是正确的。答案被原始海报删除了，因此，感谢您无论如何将我设置在正确的道路上(是的(。