CSS怎么在Next.js项目中引入全局Sass样式_在_app.js文件中导入全局scss-css教程-PHP中文网

_app.js 在 Next.js 13+ app 目录模式下被废弃，仅对 pages 目录生效；若项目使用 app/layout.tsx，则 _app.js 完全被忽略，其导入的全局 Sass 样式（如 globals.scss）不会注入，且无报错。

css怎么在next.js项目中引入全局sass样式_在_app.js文件中导入全局scss

不能在 _app.js 中直接导入全局 Sass 样式（如 globals.scss）——Next.js 13+ 的 app 目录模式下，_app.js 已被废弃，且该文件在 app 目录中完全不生效。

为什么 `_app.js` 在 `app` 目录里不起作用

Next.js 13 引入 app 目录后，路由和布局逻辑彻底重构：_app.js 只对旧的 pages 目录有效。如果你项目使用的是 app/layout.tsx（绝大多数新项目），那么 _app.js 文件会被忽略，任何在里面写的 import '../styles/globals.scss' 都不会触发样式注入，控制台也不会报错，但样式就是不生效。

检查项目结构：存在 app/ 目录 → 必须用 app/layout.tsx 导入全局 Sass
若同时存在 pages/ 和 app/，两者共存但样式系统隔离，_app.js 只影响 pages/ 下的页面
强行保留 _app.js 并期望它控制整个应用，会导致样式漏加载、SSR/CSR 不一致、热更新失效等问题

正确做法：在 `app/layout.tsx` 中导入 `.scss` 文件

这是 Next.js 官方唯一支持的全局 Sass 入口点。只要确保 Sass 依赖已安装（npm install sass），就可以直接 import 普通 .scss 文件（非模块化）。

路径必须是相对路径，从 app/layout.tsx 出发可解析到，例如：import '@/styles/globals.scss' 或 import '../styles/globals.scss'
文件名不限于 globals.scss，但建议语义清晰，避免与 .module.scss 混淆
导入语句必须放在 layout.tsx 的顶层（不能包裹在组件函数内，也不能用 dynamic import()）
样式会注入到，并在所有子路由中持久存在（注意：Next.js 不会在路由切换时卸载它，所以只放真正全局的重置、字体、主题变量等）

示例：app/layout.tsx

Expanso json-flatten

通过 CLI 或 MCP 服务器，使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

下载

import './globals.scss'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      {children}
    
  )
}

常见错误：Sass 编译失败或样式未渲染

即使路径和导入写对了，也可能遇到无声失败：

Cannot find module 'sass'：运行 npm install sass，不是 sass-loader 或 node-sass（Next.js 内置支持 sass 包）
SCSS 语法报错但页面没提示：检查是否用了 @use 或 @forward 引入了未安装的第三方库（如 Bootstrap Sass），这类导入在全局上下文中容易因路径或配置缺失而静默跳过
样式只在客户端生效、服务端无 CSS：确认没有在 layout.tsx 中用条件判断包裹 import（如 if (typeof window !== 'undefined')），全局样式必须同步导入
字体或变量未生效：Sass 中的 @font-face 或 :root 声明需位于顶层，不能嵌套在选择器内；CSS 自定义属性推荐用 :root {} 而非 html {}