NPM脚本的SASS问题autoprefix和postcss

如何解决NPM脚本的SASS问题autoprefix和postcss

我的编译过程不起作用，并且由于我是初学者，所以不知道为什么。任何建设性的帮助都受到高度赞赏；）。

我花了整整24小时来解决问题，但没有成功... 我已经重新安装了所有软件包，清理了缓存等，但是没有任何帮助。

     {
  "name": "natours","version": "1.0.0","description": "Landing page for natours","main": "index.js","scripts": {
    "watch:sass": "node-sass sass/main.scss css/style.css -w","devserver": "live-server","start": "npm-run-all --parallel devserver watch:sass","compile:sass": "node-sass sass/main.scss css/style.comp.css","concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css","prefix:css": "postcss --use autoprefixer -b 'last ten versions' css/style.concat.css -o css/style.prefix.css","compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed","build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
  },"author": "Jonas","license": "ISC","devDependencies": {
    "autoprefixer": "^10.0.0","concat": "^1.0.3","libs": "^0.1.2","node-sass": "^4.14.1","npm-run-all": "^4.1.5","postcss": "^8.0.5","postcss-cli": "^7.1.2"
  },"dependencies": {
    "live-server": "^1.2.1"
  }
}

当我运行命令npm run prefix：css时，出现这样的错误：

npm run prefix:css

> natours@1.0.0 prefix:css /home/piotr/Documents/personal/ProgrammingBooks/HTML,CSS/advanced-css-course-master/Natours/starter
> postcss --use autoprefixer -b 'last ten versions' css/style.concat.css -o css/style.prefix.css

Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin.
    at Processor.normalize (/home/piotr/Documents/personal/ProgrammingBooks/HTML,CSS/advanced-css-course-master/Natours/starter/node_modules/postcss-cli/node_modules/postcss/lib/processor.js:167:15)
    at new Processor (/home/piotr/Documents/personal/ProgrammingBooks/HTML,CSS/advanced-css-course-master/Natours/starter/node_modules/postcss-cli/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/home/piotr/Documents/personal/ProgrammingBooks/HTML,CSS/advanced-css-course-master/Natours/starter/node_modules/postcss-cli/node_modules/postcss/lib/postcss.js:55:10)
    at /home/piotr/Documents/personal/ProgrammingBooks/HTML,CSS/advanced-css-course-master/Natours/starter/node_modules/postcss-cli/index.js:216:14
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! natours@1.0.0 prefix:css: `postcss --use autoprefixer -b 'last ten versions' css/style.concat.css -o css/style.prefix.css`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the natours@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!     /home/piotr/.npm/_logs/2020-09-18T21_58_54_802Z-debug.log

-------------
I also add COMPLETE LOG ERROR

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/home/piotr/.nvm/versions/node/v12.18.3/bin/node',1 verbose cli   '/home/piotr/.nvm/versions/node/v12.18.3/bin/npm',1 verbose cli   'run',1 verbose cli   'prefix:css'
1 verbose cli ]
2 info using npm@6.14.8
3 info using node@v12.18.3
4 verbose run-script [ 'prefix:css' ]
5 info lifecycle natours@1.0.0~prefix:css: natours@1.0.0
6 verbose lifecycle natours@1.0.0~prefix:css: unsafe-perm in lifecycle true
7 verbose lifecycle natours@1.0.0~prefix:css: PATH: /home/piotr/.nvm/versions/node/v12.18.3/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/piotr/Documents/personal/ProgrammingBooks/HTML,CSS/advanced-css-course-master/Natours/starter/node_modules/.bin:/home/piotr/.nvm/versions/node/v12.18.3/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
8 verbose lifecycle natours@1.0.0~prefix:css: CWD: /home/piotr/Documents/personal/ProgrammingBooks/HTML,CSS/advanced-css-course-master/Natours/starter
9 silly lifecycle natours@1.0.0~prefix:css: Args: [
9 silly lifecycle   '-c',9 silly lifecycle   "postcss --use autoprefixer -b 'last ten versions' css/style.concat.css -o css/style.prefix.css"
9 silly lifecycle ]
10 silly lifecycle natours@1.0.0~prefix:css: Returned: code: 1  signal: null
11 info lifecycle natours@1.0.0~prefix:css: Failed to exec prefix:css script
12 verbose stack Error: natours@1.0.0 prefix:css: `postcss --use autoprefixer -b 'last ten versions' css/style.concat.css -o css/style.prefix.css`
12 verbose stack Exit status 1
12 verbose stack     at EventEmitter.<anonymous> (/home/piotr/.nvm/versions/node/v12.18.3/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
12 verbose stack     at EventEmitter.emit (events.js:315:20)
12 verbose stack     at ChildProcess.<anonymous> (/home/piotr/.nvm/versions/node/v12.18.3/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
12 verbose stack     at ChildProcess.emit (events.js:315:20)
12 verbose stack     at maybeClose (internal/child_process.js:1021:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
13 verbose pkgid natours@1.0.0
14 verbose cwd /home/piotr/Documents/personal/ProgrammingBooks/HTML,CSS/advanced-css-course-master/Natours/starter
15 verbose Linux 5.4.0-47-generic
16 verbose argv "/home/piotr/.nvm/versions/node/v12.18.3/bin/node" "/home/piotr/.nvm/versions/node/v12.18.3/bin/npm" "run" "prefix:css"
17 verbose node v12.18.3
18 verbose npm  v6.14.8
19 error code ELIFECYCLE
20 error errno 1
21 error natours@1.0.0 prefix:css: `postcss --use autoprefixer -b 'last ten versions' css/style.concat.css -o css/style.prefix.css`
21 error Exit status 1
22 error Failed at the natours@1.0.0 prefix:css script.
22 error This is probably not a problem with npm. There is likely additional logging output above.
23 verbose exit [ 1,true ]

解决方法

我遇到了类似的问题-autoprefixer version 10.0.0似乎存在一些错误。

降级您的autoprefixer版本，您的命令将按预期运行。

在打包文件中将"autoprefixer": "^10.0.0",更改为"autoprefixer": "<10.0.0",。这将安装小于10.0.0-reference的最新版本的autoprefixer。