Next.js应用中SCSS全局样式不生效问题求助

1. 核对文件路径是否正确 #

如果你的_app.js在pages目录下，而styles目录在项目根目录（和pages同级），那么导入路径应该是../styles/globals.scss，而非./styles/globals.scss。修正后的_app.js代码：

import "../styles/globals.scss";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

2. 清理缓存并重启开发服务器 #

Next.js的开发缓存可能导致样式未更新，执行以下操作：

• 关闭当前开发服务器（Ctrl+C）
• 删除项目根目录下的.next文件夹
• 重新启动服务器：npm run dev或yarn dev

3. 检查Sass版本兼容性 #

部分Next.js版本与最新版Sass存在兼容问题，可尝试安装指定版本的Sass：

npm uninstall sass
npm install sass@1.69.5

4. 排查样式优先级冲突 #

如果全局样式被组件的模块样式覆盖，可尝试提高全局样式的选择器优先级，比如：

/* globals.scss */
body .container {
  /* 样式规则 */
}

或者临时使用!important（仅用于排查，不推荐作为常规方案）：

/* globals.scss */
.container {
  color: red !important;
}

5. 确认Pages Router配置 #

你当前使用的_app.js属于Pages Router，此配置下全局样式导入逻辑是正确的。若后续切换到Next.js 13+的App Router，需在app/layout.js中导入全局样式，此步骤当前可跳过。

内容的提问来源于stack exchange，提问作者Anushka Chauhan