我的编译过程不起作用，因为我是初学者，所以我不知道为什么。任何建设性的帮助都将受到高度赞赏;)。
我花了大约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
> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3658574259434445760718061806" rel="noreferrer noopener nofollow">[email protected]</a> 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! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6608071209131415265748564856" rel="noreferrer noopener nofollow">[email protected]</a> 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 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="503e31243f25222310617e607e60" rel="noreferrer noopener nofollow">[email protected]</a> 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 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3adb3ae83f5edf2f7edfb" rel="noreferrer noopener nofollow">[email protected]</a>
3 info using <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76181912133600474458474e5845" rel="noreferrer noopener nofollow">[email protected]</a>
4 verbose run-script [ 'prefix:css' ]
5 info lifecycle <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e9e6f3e8f2f5f4c7b6a9b7a9b7" rel="noreferrer noopener nofollow">[email protected]</a>~prefix:css: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e8e7f2e9f3f4f5c6b7a8b6a8b6" rel="noreferrer noopener nofollow">[email protected]</a>
6 verbose lifecycle <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="315f50455e44434271001f011f01" rel="noreferrer noopener nofollow">[email protected]</a>~prefix:css: unsafe-perm in lifecycle true
7 verbose lifecycle <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9d7d8cdd6cccbcaf98897899789" rel="noreferrer noopener nofollow">[email protected]</a>~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 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8b6b9acb7adaaab98e9f6e8f6e8" rel="noreferrer noopener nofollow">[email protected]</a>~prefix:css: CWD: /home/piotr/Documents/personal/ProgrammingBooks/HTML, CSS/advanced-css-course-master/Natours/starter
9 silly lifecycle <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c8c7d2c9d3d4d5e69788968896" rel="noreferrer noopener nofollow">[email protected]</a>~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 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d434c5942585f5e6d1c031d031d" rel="noreferrer noopener nofollow">[email protected]</a>~prefix:css: Returned: code: 1 signal: null
11 info lifecycle <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ff1feebf0eaedecdfaeb1afb1af" rel="noreferrer noopener nofollow">[email protected]</a>~prefix:css: Failed to exec prefix:css script
12 verbose stack Error: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82ece3f6edf7f0f1c2b3acb2acb2" rel="noreferrer noopener nofollow">[email protected]</a> 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 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6907081d061c1b1a295847594759" rel="noreferrer noopener nofollow">[email protected]</a>
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 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="305e51445f45424370011e001e00" rel="noreferrer noopener nofollow">[email protected]</a> 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 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="315f50455e44434271001f011f01" rel="noreferrer noopener nofollow">[email protected]</a> 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 .
关于npm 脚本的 SASS 问题( autoprefix 和 postcss )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63963374/