Tailwindcss の使用時にブラウザが自動的に更新されない
P粉009828788
2023-08-26 17:18:32
<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>
私は 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
その後、開発作業の終了時にリンクを削除できます。