Угловая переменная 5 активов - PullRequest
Новая
       10

Угловая переменная 5 активов

0 голосов
/ 25 апреля 2018

У меня есть изображение (то есть логотип), которое будет использоваться в различных компонентах.

Структура моей папки выглядит примерно так: 

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

Существует ли простой способ сохранить путь к папке assets / img в переменной SCSS / SASS, чтобы иметь возможность доступа к файлу logo.jpg без указания разных относительных путей в различных компонентах?

Причина, по которой я спрашиваю, заключается в том, что я хотел бы поменять изображение на основе темы, которую я реализовал из этого поста здесь . Когда мой проект компилируется, переменные, вставленные в атрибут background-image: url (...) , имеют указанный путь, который не работает корректно для всех компонентов.

Я могу себе представить, что это очень помогло бы и другим сценариям.

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Возможное другое решение из этого ответа : вы можете сохранить путь к папке ресурса: 

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

Затем вы можете изменить значение этой переменной.

0 голосов
/ 25 апреля 2018

Так что, похоже, Цлинт меня оттолкнул.

В самой теме я сохранил переменную как таковую: 

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

Однако tslint выделил это как ложный путь, поскольку он не мог найти изображение относительно пути самой темы, поэтому, поскольку во время компиляции он оценивал этот путь как неправильный, он оценивался как ноль, когда он был вставлен в мои настоящие таблицы стилей на уровне компонентов.

Чтобы исправить это, вместо этого у меня есть строка пути в переменной, и фактический URL-адрес оценивается в моей таблице стилей на уровне компонента. 

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

В моем стиле уровня компонента: 

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

К сожалению, кто-то ответил на мой вопрос, указав, что я могу просто использовать папку ресурсов напрямую, и я на самом деле не пытался строить с прямым путем к папке ресурсов, исходя из предположения, что tslint был верным с неверным путем. Ответ был удален оригинальным постером, так что спасибо, что вы все равно выбрали правильный путь (да, это было задумано).

...