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

【问题标题】：SvelteKit(ViteJS) + TailwindCSS not hot reloading componentsSvelteKit(ViteJS) + TailwindCSS 不热重载组件
【发布时间】：2022-06-11 18:59:17
【问题描述】：

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

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

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

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

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

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

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

Header.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;

【问题讨论】：

我知道这没什么用，但我将所有这些代码放入配置了 Tailwind 的 SvelteKit 项目中，并且 HMR 在Header.svelte 中运行良好。也许您可以通过从一个新的 SvelteKit 项目开始并查看 HMR 是否正常工作来隔离有问题的代码，然后安装 Tailwind，然后在 svelte.config.js 中进行更改——有些不对劲，但我认为它不包含在您发布的内容中在这里。
是的，似乎有效。这很奇怪。我得看看我的依赖项。
我也有同样的问题。我与 Svelte（不是 SvelteKit）、Tailwind 和 Vite 合作。现在我用“vite-plugin-restart”强制重启
您对这个问题有任何更新吗？我无法解决这个问题。在 Stackoverflow 上的其他地方，我看到将 vite 配置中的 svelte 插件移动到 end 有帮助，它确实有帮助，但并不完全。
@Woww 不幸的是我还没有找到这个问题的原因。我通过简单地创建一个新的 SvelteKit 框架项目并从那里开始来解决它。

标签： tailwind-css svelte vite sveltekit

【解决方案1】：

这就是我解决问题的方法：

我仔细检查并发现我在组件的导入路径中使用了小写字母而不是大写字母。奇怪的是，该组件仍在工作，但热模块重新加载 (HMR) 无法正常工作。我可能在开发时将父文件夹重命名为大写，这可能是原因。
我停止了终端，再次运行“npm run dev”或“yarn dev”
我将组件设置在布局文件之外，以检查 HMR 是否正常工作。它工作得很好。然后放回布局文件中，又能正常工作了。

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

【讨论】：