NextJS引入SCSS异常：自定义类失效但全局背景样式生效

问题描述 #

在NextJS项目中，将globals.scss导入_app组件后，页面黄色背景可正常显示，但自定义的.btn、.btnSecondary等类样式在页面刷新后失效，组件恢复根样式。已安装sass依赖并配置next.config.js，问题仍未解决。

现有配置 #

globals.scss #

@import "./variables.module.scss";

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  background-color: yellow;
}

.btn {
  color: $primary-text-color;
  font-weight: bold;
}

.btn:hover {
  color: $primary-color;
  background-color: $secondary-color;
}

.btnSecondary {
  color: $secondary-text-color;
  font-weight: bold;
}

.btnSecondary:hover {
  color: $primary-color;
}

next.config.js #

/** @type {import('next').NextConfig} */
const path = require('path')

const nextConfig = {
  reactStrictMode: true,
  experimental: { esmExternals: true },
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

module.exports = nextConfig

排查方案 #

• 检查组件类名使用：确保组件中是用className="btn"而非class="btn"，同时核对类名拼写（比如.btnSecondary的驼峰格式是否和组件中的调用一致）。排查组件是否使用了CSS Modules（.module.scss），模块化样式的哈希类名可能覆盖全局样式。
• 确认_app导入方式：在_app.jsx/_app.tsx中必须用全局导入方式：import '../styles/globals.scss';，不要使用模块化导入（import styles from '../styles/globals.scss'），否则全局类名会被哈希处理，无法生效。
• 变量文件兼容性检查：variables.module.scss是模块化SCSS文件，全局SCSS中导入模块化变量可能存在作用域问题。可以尝试将变量文件改为非模块化（重命名为variables.scss），并使用@use './variables.scss' as *;导入；若保留模块化，需确保变量添加!default声明（如$primary-text-color: #333 !default;），保证全局可引用。
• 排查配置冲突：暂时注释experimental: { esmExternals: true }配置，重启项目看是否解决问题——该实验性配置可能与SCSS处理逻辑冲突。同时确认NextJS版本（建议使用稳定版）是否兼容当前SCSS配置。
• 样式优先级排查：打开浏览器开发者工具，查看失效元素的样式面板，确认自定义.btn类是否被其他样式（如第三方UI库、全局重置样式）覆盖。若存在覆盖，可调整选择器特异性（如添加父元素选择器）或临时用!important验证（不推荐长期使用）。
• 清除缓存重启项目：删除.next文件夹和node_modules/.cache目录，重新执行npm install和npm run dev，避免缓存导致的样式不更新问题。

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