перебазировать относительные URL-адреса css относительно их относительного импорта

У меня есть стили файла sass/app.scss со следующим содержимым:

@import '../scripts/jspm_packages/npm/[email protected]/scss/font-awesome';
@import '../scripts/jspm_packages/npm/[email protected]/themes/base/jquery-ui.css';

@import 'components/base';
@import 'components/cart';
@import 'components/category';
@import 'components/dialog';
@import 'components/form';

Я хочу создать граничный файл app.css с помощью «../scripts/jspm_packages/npm/[email protected]/scss/font-awesome» и «../scripts/jspm_packages/npm/[email protected]». .5/themes/base/jquery-ui.css включен, это не проблема, но я хочу, чтобы URL-адреса в этих файлах были перебазированы относительно путей к этим файлам и некоторого пути к dist dir, где будет размещен app.css.

font-awesome.sass имеет пути к шрифтам, таким как url('../fonts/somefont.ttf'), а также jquery-ui.css. Итак, у нас есть относительный импорт и относительный URL в импортированных файлах.

Итак, если у меня есть:

dist/
  styles/
    app.css
  fonts/
    'here I want to place all awesome fonts'
  images/
    'here I want to place all images'

И я хочу получить пути в app.css, например url('../fonts/somefont.ttf') и т.д.

Я пробовал много плагинов gulp, но они не переустанавливают относительные URL-адреса в импортированных файлах.

Возможно ты можешь помочь мне. Как этого добиться, или, может быть, мне нужно что-то изменить в моем проекте, чтобы заставить его работать, как ожидалось.

Спасибо!


javascript sass import gulp jspm
person sector119    schedule 03.05.2016    source источник
comment
Вы видели clubmate.fi/import-and-globbing-in-sass ? Кроме того, вы не можете просто использовать includePaths в своей задаче gulp sass или просто создать файл scss с собственным шрифтом, в котором шрифты будут просто /fonts/..   -  person kasperoo    schedule 04.05.2016
comment
Спасибо за ваш ответ. Я никогда не читал эту статью. Но у меня нет проблем с импортом. Я хочу перебазировать URL-адреса в импортированных файлах поставщиков на лету и скопировать эти активы в папку с моими активами. Я могу создать свой собственный файл scss, но я хочу, чтобы файл поставщика не устарел при обновлении пакетов поставщика.   -  person sector119    schedule 04.05.2016

Ответы (1)


arrow_upward
1
arrow_downward

Сегодня я опубликовал пакет npm, который делает именно то, что вам нужно: css-source-map -перебазировать

После многих проб и ошибок я обнаружил, что единственный надежный способ перебазировать активы в CSS относительно файла, из которого они были импортированы, — это использовать исходные карты. Если подумать, то это имеет смысл: цель исходных карт на самом деле состоит в том, чтобы поддерживать сопоставление между парой строк/столбцов в сгенерированном файле (CSS) и парой строк/столбцов в исходном файле (SASS, LESS). Как только вы это поймете, написание модуля, который перебазирует активы относительно исходного файла, в котором на них ссылались, становится довольно тривиальным.

Пакет npm, который я написал, в основном представляет собой поток узлов, который принимает исходную карту в качестве параметра, использует файлы CSS и возвращает некоторый CSS с перебазированными активами.

Для следующих источников...

запись.scss

@import "partial/bar.scss";

.foo {
    background: url('./foo.png');
}

частичный /bar.scss

.bar {
    background: url('./bar.png');
}

... результирующий CSS будет:

.bar {
    background: url('partial/bar.png');
}

.foo {
    background: url('foo.png');
}

Не стесняйтесь вернуться ко мне, если вам нужна помощь. Открывая вопросы в репозитории GitHub или задавая вопросы здесь.

РЕДАКТИРОВАТЬ: я только что обнаружил, что URL-адрес репозитория был неверным в npm. Вот он: https://github.com/ericmorand/css-source-map-rebase. Я исправлю через несколько минут.

person Eric MORAND    schedule 03.04.2017