Autoprefixer заставляет исходную карту node-sass указывать на неправильные файлы

Я создал собственный скрипт Node, который выполняет всю обработку SCSS вручную в JS, а не через командную строку или с помощью веб-пакета.

Процесс выглядит следующим образом:

  1. Следите за изменениями в файлах .scss.
  2. При изменении скомпилируйте SCSS в CSS с помощью node-sass и одновременно создайте исходную карту с помощью node-sass.
  3. Запишите файлы screen.css и screen.css.map, используя `fs.writeFile()
  4. Для файла screen.css я затем перечитал его с помощью fs.readFile, чтобы получить буфер, и пропустил содержимое CSS через postcss, используя плагин autoprefixer для автопрефикса всего CSS. Затем я снова переписываю это, используя fs.writeFile, и, наконец, загружаю на сервер, используя jsftp. При этом процесс для файла screen.css.map точно такой же, за исключением того, что я не прогоняю его через postcss, а просто перечитываю и заливаю на сервер после первоначального написания.

Моя проблема

Если я включу плагин autoprefixer при использовании postcss, например:

postcss([autoprefixer]).process(buffer, {
    from: "assets/css/screen.css",
    to: "assets/css/screen.css"
}).then(result => {...})

исходная карта совершенно неверна при проверке в браузере и указывает не только на неправильные строки, но и на неправильные файлы.

Например, SCSS для баннера страницы находится в _banner.scss, но исходная карта говорит мне, что все это в _calendar.scss.

Однако, если я оставлю весь код таким же, но оставлю autoprefixer, например:

postcss([]).process(buffer, {
    from: "assets/css/screen.css",
    to: "assets/css/screen.css"
}).then(result => {...})

Исходная карта работает отлично, правильно указывая мне на _banner.scss для всех стилей баннеров.

Кто-нибудь знает, как я могу исправить это и заставить мои исходные карты SCSS работать, все еще используя автопрефиксер?

Ссылка на полный исходный код скрипта узла обработки SCSS здесь, игнорируйте ужасную вложенность, это всего лишь ранняя версия :) https://github.com/JJGerrish/twk-boilerplate/blob/master/template/style.js


node.js javascript sass autoprefixer source-maps
person JJ Gerrish    schedule 21.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Для тех, кому это нужно, я нашел исправление.

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

Я нашел это решение в проблеме GitHub, которая помогла мне, в основном, вам нужно получить сгенерированную node-sass исходную карту, преобразовать ее в строку, а затем передать ее объекту опции postcss map.

https://github.com/postcss/postcss/issues/222#issuecomment-318136962

Код ниже, если ссылка исчезнет:

postcss([autoprefixer])
    .process(result.css, {
        from: "assets/css/screen.css",
        to: "assets/css/screen.css",
        map: {
            prev: result.map.toString(),
            inline: false,
        },
    })
    .then(result => {...})
person JJ Gerrish    schedule 23.08.2019
comment
Привет, у меня нет от, чтобы настроить в моей задаче scss.js. не могли бы вы помочь мне в этом? - person Shashank Bhatt; 04.05.2021