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

时间:2019-09-11 08:39:18

标签: npm npm-scripts postcss autoprefixer

在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"

,这将导致以下错误打印到控制台:

  

您没有设置任何插件,解析器或字符串化器。现在,PostCSS不执行任何操作。在postcss.parts上为您的案例选择插件,并在postcss.config.js中使用它们。

1 个答案:

答案 0 :(得分:1)

  1. 创建一个名为postcss.config.js的新文件,其中包含以下内容:

    module.exports = {
      plugins: {
        autoprefixer: {
          browsers: ['last 10 versions']
        }
      }
    };
    

    将新创建的postcss.config.js文件保存在项目目录的根目录中,即,将其保存在package.json所在的目录中。

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

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