带有node-sass、autoprefixer和cssnano的npm

Question

首先，我尝试使用Stack Overflow的这个解决方案。当我尝试查看文件时，除了最后一部分之外，我已经把所有的东西都准备好了。我试图完成的是观察我的sass文件的更改，并为每个更改构建一个新的style.css前缀和缩小，在保存时，我可以在浏览器中预览更改。我只想用npm，不要用Gulp或Grunt。

​

​

{
  "name": "name",
  "version": "version",
  "description": "",
  "main": "index.js",
  "scripts": {
    "prebuild:css": "node-sass src/main.scss css/style.css ",
    "build:css": "postcss --use autoprefixer -b 'last 2 versions' < css/style.css | postcss --use cssnano > css/style.min.css ",
    "build": "npm run prebuild:css && npm run build:css ",
    "watch": "watch 'npm run build' src/* "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "cssnano": "^4.1.10",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.8",
    "postcss-cli": "^8.3.1",
    "watch": "^1.0.2"
  }
}

Answer 1

在您的package.json文件中，将监视脚本更改为：

"watch": "watch 'npm run build' './src'"