Вот моя структура каталогов:
_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
с исходной картой для каждого из них.
Любые идеи?