Tailwind CSS 重建:如何编写一个 “watch” 脚本?

huangapple go评论76阅读模式
英文:

Tailwind Css rebuilt : how write a script "watch"?

问题

我是js的新手。我安装了tailwind来更新我的网站,使其响应式。在升级到win 10(再见7)后,它运行良好。但是在VSCode中,我必须运行:

"npx tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch"

每次我启动终端时,才能使tailwind开始重建。我在一个视频中看到一个package.js包含了这一行:

"scripts":{
    "watch": "postcss ./src/css/input.css -o ./src/css/output.css --watch"
},

如果这个"watch"能够工作,那就更简单了。

执行任务:npm run watch

npm错误!code EJSONPARSE
npm错误!JSON.parse 无效的package.json:JSONParseError:在解析时JSON中的意外字符串位置533:'{
npm错误!JSON.parse "name":"postcss-cli",
npm错误!JSON.parse "version":'

无法解析JSON数据的失败。
注意:package.json必须是真正的JSON,而不仅仅是JavaScript。

有人能让它更清楚吗?

我在package.js中添加了这一行,在"node_modules\postcss-cli"中:

Tailwind CSS 重建:如何编写一个 “watch” 脚本?

英文:

I am newbie in js. I installed tailwind to update my website, to make it responsive.
It works fine after upgraded computer to win 10 (goodbye 7). But in VSCode, i have to run :

 "npx tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch"  

each time i start a terminal to make tailwind starting to rebuilt.
I saw a package.js in a video that contains this line :

"scripts":{
       "watch": "postcss ./src/css/input.css -o ./src/css/output.css --watch"
          },

Tailwind CSS 重建:如何编写一个 “watch” 脚本?

It would be more simple to code if this "watch" was working.

Exécution de la tâche : npm run watch 

npm ERR! code EJSONPARSE
npm ERR! JSON.parse Invalid package.json: JSONParseError: Unexpected string in JSON at 
position 533 while parsing '{
npm ERR! JSON.parse   "name": "postcss-cli",
npm ERR! JSON.parse   "version": '
npm ERR! JSON.parse Failed to parse JSON data.
npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript.

Anybody to make it clearer ?

I added the line in package.js, in
"node_modules\postcss-cli" :

Tailwind CSS 重建:如何编写一个 “watch” 脚本?

答案1

得分: 1

如错误消息所示,以及可能是您的IDE通过红色波浪线建议的那样,package.json 不是有效的 JSON。您在 scripts 对象中的 test 脚本后面缺少了一个逗号来分隔条目,并且在 scripts 对象的最后一个 watch 条目后面有一个错误的尾随逗号。该部分应该看起来更像:

  "pretest": "…",
  "test": "…",
  "watch": "postcss ./src/css/input.css -o ./src/css/output.css --watch"
}
英文:

As the error message suggests, and probably your IDE suggests by the red squiggly underlines, the package.json is invalid JSON. You are missing a comma after the test script to delimit the entries in the scripts object and you have an erroneous trailing comma after the final watch entry in the scripts object. That section should look more like:

  "pretest": "…",
  "test": "…",
  "watch": "postcss ./src/css/input.css -o ./src/css/output.css --watch"
}

</details>



# 答案2
**得分**: 1

在看了另一个视频,链接为watch?v=2NT6VvfR9Hk,时间是4:33后,我添加了以下代码到我的package.js文件中,而不是postcss或postcss-cli目录,而是在我的tailwind-project目录中:

"scripts": {
"watch": "tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch"
},


现在,当我启动VSCode时,无需复制并粘贴整行"tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch"来启动自动构建:我只需输入:

npm run watch


然后构建过程开始。

<details>
<summary>英文:</summary>

After have seen an other video at watch?v=2NT6VvfR9Hk at 4:33  i have added the line :     

     &quot;scripts&quot;: {
    &quot;watch&quot;: &quot;tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch&quot;
      },

in my package.js file not in postcss or postcss-cli directory, but in my tailwind-project directory.
Now when i start VSCode, no need to copy and paste the entire line &quot;tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch&quot; to start the automatic building :-)  : i just type :

    npm run watch

And the building process starts.

</details>



huangapple
  • 本文由 发表于 2023年6月26日 12:36:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/76553548.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定