autoprefixer 中断尝试解析 node-sass sourcemap

Question

这是我的目录结构：

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

我正在尝试使用 NPM 脚本重写我的工作流程。我想：

转换所有 .scss 文件 > css > autoprefix > minify > 使用 sourcemaps 输出到 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",

我试过对 autoprefixer 使用 --no-map 选项，但没有任何效果。似乎 autoprefixer 正在将 .map 文件视为 .css?

一个重要的要求是脚本与多个单独的 .scss 文件一起工作。一些项目指定了单独的样式表，因此我无法对单个 main.scss > main.css 管道进行硬编码。我需要自动获取 _src/sass/ 中的所有 .scss 文件，并为每个文件输出一个带有源映射的 .css 文件。

有什么想法吗？

Answer 1

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

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

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

到

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

修复了问题。

autoprefixer 中断尝试解析 node-sass sourcemap

autoprefixer breaks trying to parse node-sass sourcemap

source-maps

node-sass

autoprefixer

postcss

npm-scripts