更新 CSS 文件时如何让 npm run script 运行 build:style 脚本？答案

【问题标题】：How to get npm run script run the build:style script when CSS files are updated?更新 CSS 文件时如何让 npm run script 运行 build:style 脚本？
【发布时间】：2020-02-06 07:37:20
【问题描述】：

在我的 package.json 中，我运行的脚本如下所示：

  "scripts": {
    "build:style":"tailwind build src/styles/index.css -o src/styles/tailwind.css",
    "start": "npm run build:style && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

我正在为 CSS 使用这个 tailwindcss 框架，它使用 PostCSS 来更新 CSS。
目前，如果我更新我的 CSS，npm 不会运行构建，所以我的 CSS 更改在我停止并重新运行之前不可见：

npm run start

有没有办法让 npm 观察 CSS 文件，并且在更改时也运行 build:style 命令？

【问题讨论】：

标签： javascript npm tailwind-css

【解决方案1】：

很遗憾，我认为 Tailwinds 没有“观看”功能。我相信一种解决方法是安装 watch 包。

npm install watch

你有很多脚本在运行，但不知道你是如何集成 PostCSS 等的，很难确切地知道要做什么。一种选择是创建一个利用新监视节点包的新脚本。

  "scripts": {
    "build:style":"tailwind build src/styles/index.css -o src/styles/tailwind.css",
    "start": "npm run build:style && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch": "watch 'npm run start'"
  },

如果这不起作用，请查看下面的博客。它使用相同的方法，但可能具有可以帮助您弄清楚的见解！

https://flaviocopes.com/tailwind-setup/

【讨论】：