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

Posted 2023-03-07

【中文标题】如何配置响应以使用 npm-watch 监视 css 文件的更改

【英文标题】：How to config react to watch for changes in css files with npm-watch

【发布时间】：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 行）

我会努力的，谢谢

【参考方案1】：

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

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