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