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