SvelteKit(ViteJS) + TailwindCSS 不热重载组件

Question

我正在尝试使用 TailwindCSS 和 SvelteKit 编写一个应用程序，该应用程序在底层使用 ViteJS，在编码时我意识到我内部的Header组件在更改时./src/components/common/Header.svelte不会热重载。无论对组件的更改有多大或多小，Svelte 都不会显示它们，直到我在控制台中终止脚本并重新运行npm run dev。

正常的行为是整个页面随着页面以外的组件的更改而更新。

请注意，添加和删除对任何路由的更改都会立即可见，但组件保持不变。

一段时间后，这个问题变得非常烦人，我尝试在 TailwindCSS 和svelte.config.js（不是 Svelte-Kit 中的 .cjs 文件）文件中找到修复程序。

在搜索了大量答案后，我找不到任何有效的方法。

这种行为很奇怪，因为在我从事的其他使用 TailwindCSS 和 Svelte-kit 相同架构的项目中，HMR 的工作方式就像一个魅力。

这是我的文件的代码Header.svelte和__layout.svelte

标题.svelte

<script>
</script>

<header>
    <!-- TEST HEADER -->
    <nav>
        <ul class="flex gap-5 bg-red-500">
            <!--These classes are tests and won't change the appearance of the Header unless I restart the script-->
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
            <!--Other random change that won't update-->
            <li>Random Change</li>
        </ul>
    </nav>
</header>

__layout.svelte

<script>
    import '../css/tailwind.css';
    import Header from '../components/common/Header.svelte';
</script>

<Header />
<slot />

还有我的配置文件：

tailwind.config.cjs

module.exports = {
    content: ['./src/**/*.svelte', './src/app.html'],
    plugins: []
};

svelte.config.js

import preprocess from 'svelte-preprocess';
import path from 'path';


// @type {import('@sveltejs/kit').Config
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        vite: {
            resolve: {
                alias: {
                    '@components': path.resolve('./src/components'),
                    '@routes': path.resolve('./src/routes'),
                    '@utils': path.resolve('./src/utils'),
                    '@data': path.resolve('./src/data')
                }
            }
        }
    }
};

export default config;

Answer 1

这就是我在我的案例中解决问题的方法：

1. 我仔细检查后发现我在组件的导入路径中使用了小写字母而不是大写字母。奇怪的是，该组件仍在工作，但热模块重新加载（HMR）不起作用。我可能在开发时用大写重命名了父文件夹，这可能是原因。

2. 我停止了终端，再次运行“npm run dev”或“yarn dev”

3. 我将组件设置在布局文件外部以检查 HMR 是否正常工作。效果很好。然后把它放回布局文件中，又可以了。

这并不是一个令人满意的答案，因为我无法查明问题的原因，但如果发生这种情况，任何人都可以尝试这些步骤。也许只是解决它。