Tailwindcss の使用時にブラウザが自動的に更新されない
P粉009828788
P粉009828788 2023-08-26 17:18:32
0
1
538
<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 = { コンテンツ: [ './components/**/*.{js,vue,ts}', './レイアウト/**/*.vue', './pages/**/*.vue', './プラグイン/**/*.{js,ts}', 「./nuxt.config.{js,ts}」 ]、 テーマ: { 伸ばす: {} }、 プラグイン: [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 デフォルトのエクスポートdefineNuxtConfig({ css: ['~/assets/css/tailwind.css'], 建てる: { postcss: { postcssOptions: { プラグイン: { 追い風: {}、 自動プレフィクサー: {} } } } } })</pre> </p> <p>私の package.json:</p> <pre class="brush:json;toolbar:false;">{ 「プライベート」: true、 「スクリプト」: { "ビルド": "nuxt ビルド", "dev": "nuxt dev", "生成": "nuxt 生成", "プレビュー": "次のプレビュー", "postinstall": "nuxt prepare" }、 "開発依存関係": { "nuxt": "3.0.0-rc.11"、 "追い風CSS": "^3.1.8" }、 「依存関係」: { "だいすい": "^2.31.0", "firebase": "^9.10.0" } } </pre></p>
P粉009828788
P粉009828788

全員に返信(1)
P粉398117857

私は Nuxt.js を React の NextJs のようなサーバーサイド レンダリングのフレームワークだと考えています。 このようにして、すべてのデータと HTML は Nuxt サーバーによってレンダリングされ、コードで使用する CSS クラス のみを含む、生成された「html/css」バンドルがクライアント に送信されます。 したがって、追加した CSS クラスへの変更を確認したい場合は、毎回リビルドするのが普通だと思います。

毎回再構築せずに変更を直接確認したい場合 (CSS クラスを簡単に作成するためのブラウザ開発ツールなど)、Tailwind CSS テーブルを備えた HTML ルート ファイル (index.html) にリンクすることをお勧めします。 。 バージョンは、tailwind ドキュメント ページ (https://tailwindcss) で見つけることができます。 com/_next/static/css/b606771d290f9908.css

その後、開発作業の終了時にリンクを削除できます。

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート