init

Author: cnzhumr

2024-07-13-11-45-30.md

@@ -4,7 +4,7 @@
 1. GitHub Pages部署失败，显示 "Deploy Next.js site to Pages / build (push) Failing after 21s"。
 2. npm依赖解析错误：React和ReactDOM版本不兼容。
 3. package-lock.json与package.json版本不匹配。
-4. webpack错误：无法处理CSS文件中的导入语法。
+4. webpack错误：无法处理CSS文件中的导入语法和自定义指令。
 
 ## 原因分析
 1. Next.js 15.x版本需要特定的静态导出配置
@@ -13,6 +13,7 @@
 4. React与react-dom版本不兼容
 5. CI环境中的package-lock.json与更新后的package.json不同步
 6. CSS文件中使用了旧版本的Tailwind导入语法（`@import "tailwindcss"`），不兼容Tailwind 4.x
+7. CSS文件中使用了非标准的CSS指令（`@custom-variant`、`@theme inline`和`@theme`），这些指令在标准CSS处理过程中不被支持
 
 ## 解决方案
 
@@ -54,6 +55,17 @@ export default nextConfig;
   @tailwind components;
   @tailwind utilities;
   ```
+- 移除非标准CSS指令，如 `@custom-variant`、`@theme inline` 和 `@theme`，替换为标准CSS：
+  ```css
+  .dark * {
+    /* 替代 @custom-variant dark (&:is(.dark *)); */
+  }
+  
+  /* 将 @theme inline 替换为直接在 :root 中定义变量 */
+  :root {
+    --breakpoint-3xl: 112rem;
+  }
+  ```
 
 ### 4. 修复包依赖
 - 添加autoprefixer和postcss依赖

app/(default)/(project)/FreeTacMan/globals.css

@@ -2,46 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+.dark * {
+  /* 替代 @custom-variant dark (&:is(.dark *)); */
 }
 
+/* CSS变量定义，替代@theme inline */
 :root {
   --o-blue: #00a0e8;
   --o-light-blue: #53c2f0;
@@ -115,7 +80,7 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
-@theme {
+:root {
   --breakpoint-3xl: 120rem;
 }
 

app/globals.css

@@ -2,50 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-    --color-o-blue: var(--o-blue);
-    --color-o-light-blue: var(--o-light-blue);
-    --color-o-dark-blue: var(--o-dark-blue);
-    --color-o-gray: var(--o-gray);
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar: var(--sidebar);
-    --color-chart-5: var(--chart-5);
-    --color-chart-4: var(--chart-4);
-    --color-chart-3: var(--chart-3);
-    --color-chart-2: var(--chart-2);
-    --color-chart-1: var(--chart-1);
-    --color-ring: var(--ring);
-    --color-input: var(--input);
-    --color-border: var(--border);
-    --color-destructive: var(--destructive);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-accent: var(--accent);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-muted: var(--muted);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-secondary: var(--secondary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-primary: var(--primary);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-popover: var(--popover);
-    --color-card-foreground: var(--card-foreground);
-    --color-card: var(--card);
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
+.dark * {
+  /* 替代 @custom-variant dark (&:is(.dark *)); */
 }
 
+/* CSS变量定义，替代@theme inline */
 :root {
     --o-blue: #00a0e8;
     --o-light-blue: #53c2f0;
@@ -123,10 +84,10 @@
     --sidebar-ring: oklch(0.708 0 0);
 }
 
-
-@theme {
-    --breakpoint-3xl: 112rem;
+:root {
+  --breakpoint-3xl: 112rem;
 }
+
 @layer base {
     * {
         @apply border-border outline-ring/50;