autoprefixer ломается при попытке разобрать исходную карту node-sass

Вот моя структура каталогов:

_build/
  |- postcss.config.js
_src/
  |- sass/
        |-main.scss
css/
  |-main.css
  |-main.css.map
package.json

Я пытаюсь переписать свой рабочий процесс, используя сценарии NPM. Я хочу:

преобразовать все файлы .scss > css > autoprefix > minify > вывод в папку css/ с исходными картами.

Сейчас я застрял на этапе автопрефикса.

Вот мой package.json

{
  "name": "workflow",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:css": "node-sass --source-map true ./_src/sass/ -o ./css",
    "build:autoprefix-css": "postcss --config ./_build/ -m -r ./css"
  },
  "license": "ISC",
  "browserslist": [
    "IE 11",
    "last 3 versions",
    "not IE < 11"
  ],
  "devDependencies": {
    "autoprefixer": "^9.3.1",
    "node-sass": "^4.10.0",
    "postcss": "^7.0.5",
    "postcss-cli": "^6.0.1"
  }
}

А вот postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

node-sass правильно выводит main.css и main.css.map. Но autoprefixer выдает ошибку:

CssSyntaxError: D:\workflow\css\main.css.map:3:20: Missed semicolon

  1 | {
  2 |   "version": 3,
> 3 |   "file": "main.css",
    |                     ^
  4 |   "sources": [
  5 |           "../_src/sass/main.scss",

Я пытался использовать параметр --no-map для autoprefixer, но это не дало никакого эффекта. Кажется, что autoprefixer обрабатывает файл .map так, как если бы он был .css?

Одним из важных требований является то, что скрипт должен работать с несколькими отдельными файлами .scss. В некоторых проектах указаны отдельные таблицы стилей, поэтому я не могу жестко запрограммировать один конвейер main.scss > main.css. Мне нужно автоматически взять все файлы .scss в _src/sass/ и вывести файл .css с исходной картой для каждого из них.

Любые идеи?


postcss node-sass npm-scripts autoprefixer source-maps
person Robert_QSS    schedule 12.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Спасибо RyanZim в postcss-cli за обнаружение проблемы. При передаче каталога в postcss вам нужно использовать glob только для .css файлов, а не для всего каталога. Порядок, в котором вы передаете ввод/вывод в postcss, тоже имеет значение.

Добавление глобуса и перемещение параметра каталога в начало команды, т.е. изменение:

"build:autoprefix-css": "postcss --config ./_build/ -m -r ./css"

to

"build:autoprefix-css": "postcss -r ./css/*.css --config ./_build/ -m"

решает проблему.

person Robert_QSS    schedule 13.11.2018