如何配置响应以使用 npm-watch 监视 css 文件的更改答案

【问题标题】：How to config react to watch for changes in css files with npm-watch如何配置响应以使用 npm-watch 监视 css 文件的更改
【发布时间】：2020-06-05 05:34:40
【问题描述】：

我已经安装了 react 和 tailwind，但我无法配置 npm-watch 来监视 css 文件。如果我更改 js 文件是可以的，但不是 css。

这是我的 package.json。我尝试了许多不同的配置方式，但没有运气

    "watch": {
    "css": {
      "patterns": [ "src/styles"],
      "extenstions": "css",
      "runOnChangeOnly": false,
      "quiet":true
    },
    "build": {
      "patterns": ["src"],
      "extensions": "js,jsx",
      "runOnChangeOnly": false,
      "quiet":true
    }
  },
  "scripts": {
    "build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
    "start": "npm run build:style && react-scripts start && npm run watch",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch": "watch && npm run build:style"
  },

【问题讨论】：

您的命令不应该是build:style 而不是css 吗？（第 2 行）
我会努力的，谢谢

标签： reactjs npm tailwind-css

【解决方案1】：

问题不在于 npm-watch 或配置文件。如果您想读取 css 文件，则必须导入该文件。就这些。在 index.js 中导入 css。

import './styles/tailwind.css'; 
import './styles/index.css';

【讨论】：