无法在npm脚本中正确配置Autoprefixer

编程问答 2022-06-13

问题描述

我正在尝试配置PostCSS Autoprefixer，但是它不起作用。它应该在相同的“ css”文件夹中输出新的style.prefix.css文件。请帮助我了解，我的npm脚本/设置有什么问题

这是我的package.json 

{
  "name": "sb-demo-website","version": "1.0.0","description": "demo website","main": "index.js","scripts": {
    "sass": "node-sass-chokidar sass/main.scss css/style.css -w --recursive --skip-initial","compile-sass": "node-sass-chokidar sass/main.scss css/style.comp.css","prefix-css": "postcss css/style.comp.css -o css/style.prefix.css --use autoprefixer"
  },"repository": {
    "type": "git","url": ""
  },"author": "tk","license": "ISC","bugs": {
    "url": ""
  },"homepage": "","browserslist": "last 3 versions","devDependencies": {
    "autoprefixer": "^10.0.0","node-sass": "^4.14.1","node-sass-chokidar": "^1.5.0","postcss": "^8.0.5","postcss-cli": "^7.1.2"
  }
}

这是我运行脚本时的输出：

$ npm run prefix-css

> sb-demo-website@1.0.0 prefix-css C:\Users\tk\Documents\Study\web\css\demo1
> postcss css/style.comp.css -o css/style.prefix.css --use autoprefixer

Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin.
    at Processor.normalize (C:\Users\tk\Documents\Study\web\css\demo1\node_modules\postcss-cli\node_modules\postcss\lib\processor.js:167:15)
    at new Processor (C:\Users\tk\Documents\Study\web\css\demo1\node_modules\postcss-cli\node_modules\postcss\lib\processor.js:56:25)
    at postcss (C:\Users\tk\Documents\Study\web\css\demo1\node_modules\postcss-cli\node_modules\postcss\lib\postcss.js:55:10)
    at C:\Users\tk\Documents\Study\web\css\demo1\node_modules\postcss-cli\index.js:216:14
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sb-demo-website@1.0.0 prefix-css: `postcss css/style.comp.css -o css/style.prefix.css --use autoprefixer`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sb-demo-website@1.0.0 prefix-css script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\tk\AppData\Roaming\npm-cache\_logs\2020-09-18T17_50_55_597Z-debug.log

非常感谢您的帮助

解决方法

目前看来最新的Autoprefixer v10.0.0有点broken。将其降级到版本9.8.6可以解决上述问题。

我将其发布为答案，以防其他人遇到类似的错误。

autoprefixernpmnpmnpmnpm-scriptspostcss