Проблема при компиляции sass?

Question

[Anna]

в ходе верстки в файлах с расширением .scss некоторым блокам было прописано свойство background-image с указанием следующего пути: ../../img/img-name.jpg.
При компиляции получается так, что хром не может найти данную картинку, ссылаясь на неверный путь.
Структура проекта следующая:

css/
    | - style.css
sass/
    | - style.scss
    | - blocks/
         | - block_name.scss (задаю фон здесь)
img/
    | - backgrnd_img.jpg
index.html

Очевидно, что указанный выше путь ломается при его переносе в style.css, точнее он переносится без изменений и в этом ошибка. Подскажите, пожалуйста, как можно было бы это поправить.

Answer 1

[Сергей delphinpro]

К сожалению Sass не умеет резолвить такие пути. Проблема есть, о ней знают, но пока не решают (разработчики sass я имею ввиду).
Я принял за правило писать абсолютные ссылки
/img/img-name.jpg
Да, есть минусы, но как-то живем пока.

Comments

[Anna]

я правильно понимаю, что background-image вы стараетесь не использовать?

[Сергей delphinpro]

Anna: нет, использую. просто пишу абсолютный путь. Можно было бы использовать sass-переменную или писать сразу нужный, но тогда теряется автокомплит в IDE, а мне этого не надо.
Если по каким-то причинам требуется относительный ../img/ (например сайт лежит не в корне или для CMS требуется), то просто подключаю gulp-replace и меняю "/design/images/" на "../images/" при сборке.

[Сергей delphinpro]

Вместо gulp-replace в последнее время использую свой модуль

Осторожно, код =)

/**
 * @since       12.10.2016 11:19
 * @author      delphinpro <[e-mail]>
 * @copyright   copyright © 2016 delphinpro
 * @license     licensed under the MIT license
 */

"use strict";

const gulpUtil = require('gulp-util');
const through  = require('through2');

const PLUGIN_NAME = 'gulp-sass-image-resolver';

module.exports = function (options) {
    return through.obj(function (file, enc, cb) {
        if (file.isNull()) {
            cb(null, file);
            return;
        }

        if (file.isStream()) {
            cb(new gulpUtil.PluginError(PLUGIN_NAME, 'Streaming not supported'));
            return;
        }

        try {
            let content = file.contents.toString();

            if (/\.css$/.exec(file.path) !== null) {
                if (/url\("(.+?)"\)/.exec(content) !== null) {
                    let match;
                    const pattern = /url\("(.+?)"\)/g;

                    while ((match = pattern.exec(content)) !== null) {
                        let found  = match[1];
                        let result = found.replace(options.source, options.replacement);
                        content    = content.replace(found, result);
                    }

                    file.contents = new Buffer(content);
                }
            }
        } catch (err) {
            this.emit('error', new PluginError(PLUGIN_NAME, err));
        }

        this.push(file);
        cb();
    });
};

[Anna]

Сергей: спасибо большое за такие подробные ответы!

Answer 2

[GoodProject]

../img/img-name.jpg.
и лучше иметь всего 2 папки css и sass тогда точно проблем не будет)

Comments

[Anna]

прописала такой путь - стало корректно отображаться)
так у меня и так 2 папки только - сасс и цсс. или вы предлагаете отказаться от папки blocks?)

[Сергей delphinpro]

Anna: не отказывайтесь. не подстраивайтесь под инструмент. подстраивайте инструмент под себя =)
Хотя в данном случае не подстроишь.