Question

这是我的目录结构：

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

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

将所有.scss文件转换为> css> autoprefix>缩小>使用源映射输出到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/文件，并为每个文件输出一个带有sourcemap的.css文件。

有什么想法吗？

Answer 1

感谢postcss-cli的{{3}}发现问题。将目录传递到postcss时，您需要仅针对.css个文件而不是整个目录进行遍历。您将输入/输出传递到postcss的顺序似乎也有所不同。

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

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

到

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

解决了该问题。

autoprefixer尝试解析节点无效源映射时中断

1 个答案: