Next.js 14 Pages Router中Carbon Design System样式异常求助

问题背景 #

在Next.js 14 Pages Router项目中按官方步骤集成Carbon Design System时，初始操作后样式完全不生效；将全局样式文件改为.scss并引入carbon-components-react后，组件样式部分生效，但按钮默认无背景色，仅hover状态显示蓝色背景。

初始样式不生效的原因 #

• 普通.css文件无法解析Sass的@use指令：Carbon的样式基于Sass编写，你之前在globals.css中使用@use '@carbon/react'是无效的，CSS不支持这个Sass语法。
• 无需改用carbon-components：@carbon/react是Carbon官方最新的React组件库，已经包含了旧版carbon-components-react的所有功能，回退到旧包没必要。

半生效问题（按钮无默认背景）的解决 #

出现按钮仅hover有背景的情况，是因为样式引入不完整，没有加载Carbon的完整主题和基础样式。按以下步骤调整：

1. 安装Sass依赖 #

Next.js需要sass处理SCSS文件，先安装开发依赖：

yarn add sass --dev

2. 修正全局SCSS文件 #

将globals.css重命名为globals.scss，替换内容为：

// 完整引入Carbon的所有样式和主题
@use '@carbon/react/scss/styles.scss';

// 若需要和Tailwind共存，再引入Tailwind样式（注意顺序）
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

3. 确认全局样式导入路径 #

在_app.tsx中确保导入的是修改后的SCSS文件：

import "@/styles/globals.scss";

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

关键说明 #

• @use '@carbon/react/scss/styles.scss'会加载Carbon的完整样式体系，包括组件默认样式、主题变量等，解决按钮无默认背景的问题。
• 若不需要Tailwind CSS，可以直接删除Tailwind相关的导入语句。

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