首頁  >  問答  >  主體

使用 Tailwindcss 時瀏覽器不會自動更新

<p>每次我新增一個類別時,要查看更改,我必須停止運行 nuxt,重新載入 VS Code 視窗並再次運行「npm run dev」。然後我就可以看到變化</p> <p>我的 tailwind.config.js :</p> <p> <pre class="brush:js;toolbar:false;">/**@type {import('tailwindcss').Config}*/ module.exports = { content: [ './components/**/*.{js,vue,ts}', './佈局/**/*.vue', './pages/**/*.vue', './插件/**/*.{js,ts}', './nuxt.config.{js,ts}' ], theme: { extend: {} }, plugins: [require('daisyui')] }</pre> </p> <p>我把 tailwind.css 檔案放在 assets/css/tailwind.css 中</p> <p>並將其匯入到我的佈局元件中:layouts/default.vue</p> <p>我的 nuxt.config.ts:</p> <p> <pre class="brush:js;toolbar:false;">// https://v3.nuxtjs.org/api/configuration/nuxt.config export default defineNuxtConfig({ css: ['~/assets/css/tailwind.css'], build: { postcss: { postcssOptions: { plugins: { tailwindcss: {}, autoprefixer: {} } } } } })</pre> </p> <p>我的package.json:</p> <pre class="brush:json;toolbar:false;">{ "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }, "devDependencies": { "nuxt": "3.0.0-rc.11", "tailwindcss": "^3.1.8" }, "dependencies": { "daisyui": "^2.31.0", "firebase": "^9.10.0" } } </pre></p>
P粉009828788P粉009828788442 天前527

全部回覆(1)我來回復

  • P粉398117857

    P粉3981178572023-08-27 12:35:52

    我認為 Nuxt.js 是一個像 NextJs for React 一樣進行伺服器端渲染的框架。 這樣,所有資料和 HTML 都由 Nuxt 伺服器呈現,該伺服器將產生的「html/css」套件傳送到客戶端僅包含您在程式碼中使用的 css 類別。 所以我想說,每次你想看到你剛剛添加的 css 類別的更改時,重建是正常的。

    如果您想直接查看更改而無需每次重新構建(例如在瀏覽器開發工具中以便輕鬆編寫 css 類),我建議您鏈接到 HTML 根文件 (index.html),完整的順風CSS表。 您可以在 tailwind 文件頁面上找到一個版本,如下所示:https://tailwindcss。 com/_next/static/css/b606771d290f9908.css

    然後您可以在開發工作結束時刪除該連結。

    回覆
    0
  • 取消回覆