The_KEK
@The_KEK
Я хочу питсы

Почему не появляется путь до картинок SCSS?

В SCSS при заполнении пути до картинки не появляются подсказки, хоть и картинка отображается

6214c8d66d619957807432.png
  • Вопрос задан
  • 89 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Это путь от выходного css файла, а не от sass файла, в котором он написан.
Чувствуете разницу?

В sass до сих пор не встроен резолвер путей к файлам, в отличие от других препроцессоров.
То есть пути к файлам никак не обрабатываются, и отправляются на выход как етсь.
Это проблема.
Например у вас такая структура:

dist/
  css/
    style.css
  images/
    image.png
src/
  images/
    image.png
  sass/
    blocks/
      logo.scss
    styles.scss


пока вы пишете прямо в styles.scss, все отлично
.logo { background: url(../images/image.png); }
Путь совпадает и в ваших исподниках, и в билде. Шторм радостно выдает подсказки.

Как только вы решите писать в отдельном файле blocks/logo.scss, путь к картинке в исходниках становится другим, но в билде остается прежним. Шторм не может выдать подсказку.
В других препроцессорах можно писать исходный путь
.logo { background: url(../../images/image.png); }
Они преобразуют путь на выходе до корректоного.
В sass - нет.

Если вы используете webpack в качестве сборщика, то для него есть resolve-url-loader, который худо-бедно исправляет данных недостаток.

Другое решение - использовать пути от корня.

.logo { background: url(/images/image.png); }

Тут шторм сможет подсказывать. Нужно только папку dist пометить как Resource root.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы