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

Question

[The_KEK]

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

Comments

[ThunderCat]

Скорее всего не задан ресурс рут.

Answer 1

[Сергей delphinpro]

Это путь от выходного 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.