autoprefixer обрывается при попытке разобрать исходную карту node-sass - PullRequest
0 голосов
/ 12 ноября 2018

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

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

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

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

Я застрял на стадии авторефикса.

Вот мой пакет. 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 с исходной картой для каждого.

Есть идеи?

1 Ответ

0 голосов
/ 13 ноября 2018

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

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

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

до

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

исправляет проблему.

...