當(dāng)我在條件下導(dǎo)入全局css時(shí)，出現(xiàn)錯(cuò)誤 導(dǎo)入聲明只能在命名空間或模塊的頂級(jí)使用。

In _app.tsx

if (Cookies.get("theme") === "dark"){
    import "@/styles/core-dark.css";
    import "@/styles/theme-default-dark.css";
}else{
    import "@/styles/core.css";
    import "@/styles/theme-default.css"; 
}

它不起作用了，有人能建議嗎

你有的是進(jìn)口申報(bào)單。您可以使用動(dòng)態(tài)行為的導(dǎo)入功能。

if (Cookies.get("theme") === "dark") {
    await import("@/styles/core-dark.css");
    await import("@/styles/theme-default-dark.css");
} else {
    await import("@/styles/core.css");
    await import("@/styles/theme-default.css"); 
}

注意:如果不支持頂級(jí)await，將上面的語(yǔ)句放入async IIFE中

例如

(async () => {
   if (Cookies.get("theme") === "dark") {
      await import("@/styles/core-dark.css");
      await import("@/styles/theme-default-dark.css");
   } else {
      await import("@/styles/core.css");
      await import("@/styles/theme-default.css"); 
   }
})()

我找到了解決辦法，并張貼在這里

if (Cookie.get("theme") === "dark") {
    if (typeof window !== "undefined") {
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = "/css/theme-default-dark.css";
        document.getElementsByTagName("HEAD")[0].appendChild(link);

        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = "/css/core-dark.css";
        document.getElementsByTagName("HEAD")[0].appendChild(link);
    }
} else {
    if (typeof window !== "undefined") {
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = "/css/theme-default.css";
        document.getElementsByTagName("HEAD")[0].appendChild(link);

        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = "/css/core.css";
        document.getElementsByTagName("HEAD")[0].appendChild(link);
    }
}

我使用過(guò)typescript和nextjs，都運(yùn)行良好