autoprefixer 尝试解析 node-sass 源映射时中断

Question

这是我的目录结构：

_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 管道进行硬编码。我需要自动获取_src/sass/ 中的所有.scss 文件，并为每个文件输出一个带有源映射的.css 文件。

有什么想法吗？

Answer 1

感谢RyanZimpostcss-cli 发现问题。将目录传递给 postcss 时，您需要专门针对 .css 文件而不是整个目录进行 glob。您将输入/输出传递给postcss 的顺序似乎也有所不同。

添加glob并将目录选项移到命令前面，即更改：

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

到

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

解决了这个问题。