Как компилируются пути из scss в css?

Question

[aQuere]

В общем в моем проекте css и scss находятся в разных местах и при загрузке на гитхаб картинки сбрасываются. Они указаны в относительных путях от файла scss до какой-то картинки, но при компиляции пути НЕ меняются под место нахождения css файла. В общем, вопрос следующий: почему у меня на локальном сервере запускается проект со всеми картинками, а на гитхабе нет?

Answer 1

[Flying]

Sass ничего не знает про ваши пути до картинок, указание корректных путей - ваша задача. Пути должны указываться относительно CSS файла, а не SCSS т.к., очевидно, они будут использоваться только когда CSS файл будет загружен в браузер.

По поводу "локально запускается": проверьте что ваши пути в итоге не уходят выше document root сайта т.к. если это так - то они, очевидно, недоступны извне.

Comments

[aQuere]

Ну конечно не выходят за document root, они в нем указывают, но указывают ОДИН относительный путь для разнорасположенных документов (css и scss файлы). Так вот как так выходит, что локально каким-то образом css файл находит картинки по относительному пути scss файла?

[Flying]

Было бы хорошо увидеть пример того как именно расположены эти файлы и что там в итоге в CSS за пути, навскидку сложно сказать. Опять же, расположенные по-разному файлы вполне могут иметь один относительный путь к файлу, например:

/css
  style.css
/scss
  style.scss
/images
  picture.jpg

В данном случае и CSS и SCSS файлы, имея путь ../images/picture.jpg будут корректно указывать на один и тот же файл.

[aQuere]

Flying, Да, я об этом подумал. У меня все точно также расположено за исключением того, что scss файлы находятся на уровень ниже по вложенности, то есть внутри папки scss есть еще подпапки в которых лежат файлы. То есть это разные относительные пути
В общем у гитхаба странное устройство путей, на стороннем хостинге все работает без каких-либо проблем, все картинки на месте

[Flying]

Конкретно про GitHub не скажу т.к. не разворачивал там сайты. В принципе можно попробовать сконвертировать пути в абсолютные, для этого можно использовать PostCSS, есть целый ряд плагинов для работы с url, можно посмотреть, например, вот на этот.

Answer 2

[sorokinfil]

Глянул один из своих проектов. У меня каталог scss лежит внутри каталога с css, относительные пути указаны от родительского каталога с css. Вероятно, у вас каталоги css и scss лежат в одном каталоге, и поэтому кажется, что пути относительные от scss. Выход - расположите каталоги таким же образом там, где у вас они сбрасываются.