带有 node-sass、autoprefixer 和 cssnano 的 npm答案

【问题标题】：npm with node-sass, autoprefixer, and cssnano带有 node-sass、autoprefixer 和 cssnano 的 npm
【发布时间】：2021-06-24 20:27:37
【问题描述】：

首先我尝试使用来自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"
  }
}

【问题讨论】：

请看下面我的回答。虽然我知道您正在寻找一个纯粹的解决方案（仅限 NPM），但根据我的经验，您很快会发现在没有任务运行器的情况下运行顺序甚至并行脚本要困难得多 - 我个人更喜欢 Gulp - 它有效漂亮，您可以根据环境变量执行一系列复杂的任务 - 例如，如果您的环境是 PROD，则在 watch 上缩小/uglify/concat，但在 DEV 上时则不行。

标签： node.js npm sass node-sass

【解决方案1】：

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

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

【讨论】：