在 NPM 脚本中找不到模块自动前缀

Question

在 windows 10 和 npm 版本 6.9.0 下，我无法使以下脚本运行：

"build:css": "postcss --use autoprefixer -b 'last 2 versions' < ./static/css/main.css"

我总是在 Windows 控制台中收到如下相同的错误：

Plugin Error: Cannot find module 'autoprefixer'

我尝试将语法更改为以下语法但没有结果：

"build:css": "postcss --use autoprefixer -b \"last 10 versions\" ./static/css/main.css -o ./static/css/main-prefixed.css"

谁能告诉我这里有什么问题？老实说，我对这个 npm 脚本还很陌生。

我的 package.json 看起来像这样：

{
  "name": "test-automate-npm",
  "version": "1.0.0",
  "description": "test",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "echo 'Compiling SCSS' && node-sass --watch scss -o ./static/css",
    "build": "npm run scss && npm run build:css",
    "build:css": "postcss --use autoprefixer -b 'last 2 versions' < ./static/css/main.css"   
  },
  "keywords": [
    "keywords",
    "here"
  ],
  "author": "Barleby",
  "license": "ISC",
  "dependencies": {
    "node-sass": "^4.12.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss": "^5.0.16",
    "postcss-cli": "^2.5.0"
  }
}

提前致谢！

编辑：

我还尝试在 package.json 中定义名为 build:css 的 npm 脚本，如下所示：

"build:css": "postcss ./static/css/main.css autoprefixer -b \"last 10 versions\" -o ./static/css/main-prefixed.css"

这会导致以下错误打印到控制台：

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on postcss.parts and use them in postcss.config.js.

Answer 1

创建一个名为 postcss.config.js 的新文件，其中包含以下内容：
```
module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['last 10 versions']
    }
  }
};
```
将新创建的postcss.config.js文件保存在项目根目录中，即将其保存在package.json所在的同一目录中。

将 package.json 中名为 build:css 的 npm 脚本更改为以下内容：

...
"scripts": {
  ...
  "build:css": "postcss ./static/css/main.css -o ./static/css/main-prefixed.css"
},
...

在 NPM 脚本中找不到模块自动前缀

Cannot find module autoprefixer in NPM scripts

npm

autoprefixer

postcss

npm-scripts