错误源于全局css未在正确位置静态导入：pages router需在pages/_app.js首行导入，app router需在app/layout.tsx首行导入，其他任何位置均触发报错。

Global CSS cannot be imported from files other than your Custom _app.js 报错怎么修？ 这个错误根本不是“不能导入”，而是 Next.js 在构建时没在正确位置找到全局 CSS 的静态 import。它只认两个地方：Pages Router 的 pages/_app.js（或 _app.tsx），或者 App Router 的 app/layout.tsx（或 .js）。其他任何位置——比如 pages/index.js、components/Header.tsx，甚至 _app.js 里函数体内——都会触发该报错。

• 检查项目结构：有 app/layout.tsx 且没禁用 App Router？那就别碰 pages/_app.js，删掉或重命名它，否则会干扰构建
• 确认 import 是否真在文件第一行：前面不能有空行、注释、import React 或任何代码
• 搜索整个项目，删掉所有其他地方的 import '../styles/globals.css'（包括页面、组件、自定义 hooks）
• 如果用了 Tailwind，确保 @tailwind base 等指令全写在那个被 import 的 CSS 文件里，而不是拆开塞到多个文件

App Router 下为什么 _app.js 里的 import 不生效？ 因为 App Router 已废弃 _app.js。Next.js 13+ 启用 App Router 后，pages/_app.js 被完全忽略——你写在里面，它既不报错也不加载，样式自然丢失。

• 全局 CSS 必须放在 app/globals.css（推荐路径），并在 app/layout.tsx 顶部第一行写 import './globals.css'
• 绝对不要加 'use client'：CSS 导入是服务端行为，加了反而可能阻断 SSR 样式注入
• app/layout.tsx 中的 import 只影响 app/ 下的路由，对 pages/index.js 等 Pages Router 页面完全无效
• 如果混用双路由（pages/ 和 app/ 同时存在），就得分别配：Pages 页面走 pages/_app.js，App 页面走 app/layout.tsx

为什么样式刷新后丢失或热更新不生效？ 这通常不是配置错，而是 CSS 文件本身越界了。

• globals.css 里写了 body { display: none } 或重置类名（如 .container）？它会影响所有路由，包括 _document 渲染阶段，可能导致空白页
• 用了 @layer、@custom-media 等 PostCSS 特性？必须配好 postcss.config.js，否则构建时解析失败，样式静默失效
• 文件名带 .module.css 后缀，或被 next.config.js 误设为模块化（如 cssModules: { auto: true }）？全局 CSS 必须是纯 CSS，不能是模块
• 修改 globals.css 后 dev server 没反应？重启 npm run dev，Next.js 的 CSS 热更新对顶层全局文件支持不稳定

Water.css 或其他第三方 CSS 怎么安全引入？ 直接 import 第三方 CSS 文件没问题，但路径和时机必须守死规矩。

• 放 public/css/water.css？不行：public/ 下的文件只能通过 <link href="/css/water.css"> 引入，不能用 import，否则报错
• 正确做法：把 water.css 放进 styles/ 或 app/ 目录下，然后在对应根布局顶层 import（如 app/layout.tsx 中 import '../styles/water.css'）
• 别用 import('./water.css') 动态加载——SSR 阶段无法提取样式依赖，首屏无样式
• 如果要用 Sass/Less，确保已装 sass 或 less，Next.js 默认支持，但 import 路径仍需静态、顶层

真正卡住人的从来不是“怎么写”，而是“在哪写”和“能不能写”。只要 import 出现在非根布局文件里，哪怕逻辑再对，Next.js 编译器也直接拒收——它不看内容，只认位置。

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！