Изменить путь в файле, gulp-sass

@Demiurge · Регистрация: 17.01.2015

Студворк — интернет-сервис помощи студентам

Использую gulp-sass
В папке с sass есть еще несколько папок и когда задаю путь например к изображением получаеться что то вроде такого "../../../img/somaName.jpg";
Такой же пусть получаеться на выходе в css файле. Хотя там не нужно выходить столько раз из папок. Как сделать так что бы путь в css файле коректно редактировался?

@mrtoxas · 08.12.2016, 19:38

Покажите gulpfile.js

@Demiurge · 08.12.2016, 22:10 **[ТС]**

mrtoxas,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var gulp = require('gulp');
var sass = require('gulp-sass');
 
 
gulp.task('mytask', function() {
//   console.log('test'); 
});
 
gulp.task('sass', function(){ 
    return gulp.src('app/sass/**/*.scss') 
        .pipe(sass()) 
        .pipe(gulp.dest('app/css')) 
});
 
gulp.task('sass:watch', function () {
  gulp.watch('app/sass/**/*.scss', ['sass']);
});

Добавлено через 2 часа 4 минуты
апчег теме, нужен как можно скорее ответ

@mrtoxas · 08.12.2016, 22:24

Сложно что-то понять. У вас папка с изображениями находится вне проекта?

@Demiurge · 09.12.2016, 12:53 **[ТС]**

mrtoxas,
путь к изображениям "app/img"
to css "app/css/main.css"
to scss "app/sass/main.scss"
Но в scss есть еще папки к которым вот такой вот путь "app/sass/other/*.scss"

Добавлено через 14 часов 7 минут
Ап ап ап ап

@mrtoxas · 10.12.2016, 11:08

В конечном итоге, все ваши css файлы помешаются в app/css. Так указывайте путь в них исходя из этого.

@Demiurge · 10.12.2016, 12:14 **[ТС]**

mrtoxas, Так и есть, мне нужно в самом коде изменить путь который я указываю для картинок. Просто в scss он один а в css получается нужен уже другой

В папке с sass есть еще несколько папок и когда задаю путь например к изображением получаеться что то вроде такого "../../../img/somaName.jpg";
Такой же пусть получаеться на выходе в css файле. Хотя там не нужно выходить столько раз из папок. Как сделать так что бы путь в css файле коректно редактировался?

@mrtoxas · 10.12.2016, 12:24

Зачем вы в scss указываете такой путь? Попробуйте указывайте сразу такой, какой должен быть в css. Все равно, вы проверяете код уже с css.

@Single Feniks · 17.12.2019, 01:47

Тоже столкнулся с этой проблемой при переходе с LESS на SASS (SCSS) при работе с Galp.
Проблема заключается в том, что в SASS нет встроенного преобразования относительных адресов, по крайней мере я его не нашел, и зачем бы тогда вместе с ним использовали всякие решения вроде css-loader или gulp-resolve-url.

Данный факт меня несколько озадачил и огорчил, т.к. в том же LESS это есть "из коробки" и включается добавлением параметра "--rewrite-urls=local" в cli ну или опцией "relativeUrls: true" в js. По моему мнению подобная возможность должна быть заложена из коробки в любом препроцессоре css.

Проблема актуальна при @include или @use файлов scss в основной файл сборки из файлов scss, которые расположены на другом уровне вложенности и содержат css код с относительным подключением файлов (картинок, svg, шрифтов и т.д.), как правило это файлы блоков, компонентов, тем, модулей и т.п., начинающихся с "_". При этом при сборке основного файла мы получаем те же значения относительных адресов, что были указаны в этих файлах, но без учета того, что мы перешли на другой уровень вложенности, т.е. указывающие в никуда см. скриншот.

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

Как с этим бороться? Есть несколько способов, но все они кривые и скорее относятся к костылям, чем к какому-то элегантному решению проблемы:

1. Держать все scss файлы на одном уровне. Теоретически, это избавит от данной проблемы, но не элегантно с точки зрения структуры файлов, например Sass Guidelines.
2. Писать абсолютные адреса файлов. ИМХО нифига не элегантно.
3. Писать адреса файлов с учетом того, что файл стилей при сборке будет расположен на другом уровне нежели текущий scss файл. Это вообще знатный костыль.
4. Использовать какие-то сторонние решения при сборке в галпе. Тут мне попался только один рабочий вариант - это gulp-resolve-url.

Он и правда корректно переписывает относительные адреса файлов, но делает это не на основе данных о цепочке инклюдов, что, полагаю, можно было бы сделать самим разработчикам sass, а поиском файлов по файловой системе с определенным "радиусом". Теоретически это может привести к проблемам с производительностью если опцией не ограничить этот "радиус" или подключением какого-то левого файла с тем же именем, если не будет найден исходный.

Но данное решение к чертям ломает возможность сгенерировать Source Map, как и выполнить минификацию файла т.к. в ходе подстановки нового адреса оно снова переформатирует минифицированный ранее код файл, а если пытаться сделать минификацию или создание Source Map после, то начинают вываливаться ошибки компиляции.

Пробовал и кучу других решений, таких как: gulp-css-url-rebase, postcss-url и т.п., но ни одно из них не дало нужного результата.
Есть еще css-loader, но это решение для Webpack, а тут речь о Gulp.

Если кто-то знает как реализовать корректную обработку относительных адресов при данном подходе с динамическим расположением файлов, а не очередной костыль с угадыванием адреса сборки, то пишите - буду благодарен (морально). Может оно уже и в ядре sass уже есть, а я просто не нашел.

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@Demiurge 2 / 2 / 2 Регистрация: 17.01.2015 Сообщений: 170

	Изменить путь в файле, gulp-sass 08.12.2016, 18:13. Показов 4730. Ответов 8 Метки нет (Все метки) Использую gulp-sass В папке с sass есть еще несколько папок и когда задаю путь например к изображением получаеться что то вроде такого "../../../img/somaName.jpg"; Такой же пусть получаеться на выходе в css файле. Хотя там не нужно выходить столько раз из папок. Как сделать так что бы путь в css файле коректно редактировался? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	08.12.2016, 19:38
	Покажите gulpfile.js 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	08.12.2016, 22:24
	Сложно что-то понять. У вас папка с изображениями находится вне проекта? 0

@Demiurge 2 / 2 / 2 Регистрация: 17.01.2015 Сообщений: 170
	09.12.2016, 12:53 [ТС]
	mrtoxas, путь к изображениям "app/img" to css "app/css/main.css" to scss "app/sass/main.scss" Но в scss есть еще папки к которым вот такой вот путь "app/sass/other/.scss" Добавлено через 14 часов 7 минут* Ап ап ап ап 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	10.12.2016, 11:08
	В конечном итоге, все ваши css файлы помешаются в app/css. Так указывайте путь в них исходя из этого. 0

@Demiurge 2 / 2 / 2 Регистрация: 17.01.2015 Сообщений: 170
	10.12.2016, 12:14 [ТС]
	mrtoxas, Так и есть, мне нужно в самом коде изменить путь который я указываю для картинок. Просто в scss он один а в css получается нужен уже другой В папке с sass есть еще несколько папок и когда задаю путь например к изображением получаеться что то вроде такого "../../../img/somaName.jpg"; Такой же пусть получаеться на выходе в css файле. Хотя там не нужно выходить столько раз из папок. Как сделать так что бы путь в css файле коректно редактировался? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	10.12.2016, 12:24
	Зачем вы в scss указываете такой путь? Попробуйте указывайте сразу такой, какой должен быть в css. Все равно, вы проверяете код уже с css. 0

@Single Feniks 31 / 31 / 5 Регистрация: 05.01.2011 Сообщений: 65
	17.12.2019, 01:47
	Тоже столкнулся с этой проблемой при переходе с LESS на SASS (SCSS) при работе с Galp. Проблема заключается в том, что в SASS нет встроенного преобразования относительных адресов, по крайней мере я его не нашел, и зачем бы тогда вместе с ним использовали всякие решения вроде css-loader или gulp-resolve-url. Данный факт меня несколько озадачил и огорчил, т.к. в том же LESS это есть "из коробки" и включается добавлением параметра "--rewrite-urls=local" в cli ну или опцией "relativeUrls: true" в js. По моему мнению подобная возможность должна быть заложена из коробки в любом препроцессоре css. Проблема актуальна при @include или @use файлов scss в основной файл сборки из файлов scss, которые расположены на другом уровне вложенности и содержат css код с относительным подключением файлов (картинок, svg, шрифтов и т.д.), как правило это файлы блоков, компонентов, тем, модулей и т.п., начинающихся с "_". При этом при сборке основного файла мы получаем те же значения относительных адресов, что были указаны в этих файлах, но без учета того, что мы перешли на другой уровень вложенности, т.е. указывающие в никуда см. скриншот. Если собирать проект в одну папку с заранее определенной структурой, то тут можно как-то извернуться, т.к. сразу ясно где изображения, где стили, а если запускать сборку по проекту, где стили раскиданы по компонентам (как пример компоненты битрикса), то вот тут понимаешь, что в этом плане LESS был бы лучше, хотя у него есть и другие недостатки, но с ними при данном подходе жить можно. Как с этим бороться? Есть несколько способов, но все они кривые и скорее относятся к костылям, чем к какому-то элегантному решению проблемы: 1. Держать все scss файлы на одном уровне. Теоретически, это избавит от данной проблемы, но не элегантно с точки зрения структуры файлов, например Sass Guidelines. 2. Писать абсолютные адреса файлов. ИМХО нифига не элегантно. 3. Писать адреса файлов с учетом того, что файл стилей при сборке будет расположен на другом уровне нежели текущий scss файл. Это вообще знатный костыль. 4. Использовать какие-то сторонние решения при сборке в галпе. Тут мне попался только один рабочий вариант - это gulp-resolve-url. Он и правда корректно переписывает относительные адреса файлов, но делает это не на основе данных о цепочке инклюдов, что, полагаю, можно было бы сделать самим разработчикам sass, а поиском файлов по файловой системе с определенным "радиусом". Теоретически это может привести к проблемам с производительностью если опцией не ограничить этот "радиус" или подключением какого-то левого файла с тем же именем, если не будет найден исходный. Но данное решение к чертям ломает возможность сгенерировать Source Map, как и выполнить минификацию файла т.к. в ходе подстановки нового адреса оно снова переформатирует минифицированный ранее код файл, а если пытаться сделать минификацию или создание Source Map после, то начинают вываливаться ошибки компиляции. Пробовал и кучу других решений, таких как: gulp-css-url-rebase, postcss-url и т.п., но ни одно из них не дало нужного результата. Есть еще css-loader, но это решение для Webpack, а тут речь о Gulp. Если кто-то знает как реализовать корректную обработку относительных адресов при данном подходе с динамическим расположением файлов, а не очередной костыль с угадыванием адреса сборки, то пишите - буду благодарен (морально). Может оно уже и в ядре sass уже есть, а я просто не нашел. Миниатюры 0