Question

我有一个将用于各种组件的图像（即徽标）。

我的文件夹结构与此类似：

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

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

我问的原因是我想换掉一个基于主题的图片，我已经从this post here实现了这个主题。编译项目后，插入 background-image：url（...）属性的变量具有指定的路径，该路径对所有组件都无法正常工作。

我可以想象这对其他场景也会有很大的帮助。

Answer 1

所以似乎tslint一直在抛弃我。

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

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

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

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

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

在我的组件级样式中：

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

可悲的是，有人回答了我的问题，指出我可以直接使用资产文件夹，而我实际上并没有尝试使用资源文件夹的直接路径进行构建，假设tslint在无效路径下是正确的。答案被原始海报删除了，所以非常感谢你让我走上正确的道路（是的，这是有意的）。

Answer 2

来自this answer的可能的其他解决方案：您可以存储资产文件夹的路径：

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

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

Angular 5资产路径变量

2 个答案: