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

Posted 2023-03-07

【中文标题】更新 CSS 文件时如何让 npm run script 运行 build:style 脚本？

【英文标题】：How to get npm run script run the build:style script when CSS files are updated?

【发布时间】：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 命令？

【参考方案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/