安装payloadcms到本地运行发现SCSS 样式文件导入失败

[deqiuwangshi-png]

Describe the Bug.

需要确认样式冲突问题，报错500

Reproduction Steps

Bug 复现步骤模板

环境信息

- **操作系统**: Windows 11
- **Next.js 版本**: 16.2.1
- **Payload CMS 版本**: 3.81.0

复现步骤

1. 初始化项目

   git clone <repository-url>
   cd xiangfeng
   pnpm install

2. 启动开发服务器

   pnpm dev
   # 或
   npm run dev

3. 访问页面

   • 打开浏览器访问 http://localhost:3000

4. 触发错误

   • 页面加载时出现 500 错误
   • 终端显示 SCSS 编译错误：

     Error: Can't find stylesheet to import.
     @import 'vars';
     

预期行为

页面正常加载，AdminBar 组件正确渲染。

实际行为

页面返回 500 错误，SCSS 编译失败。

截图

相关代码

// src/components/AdminBar/index.scss (问题文件)
@import '~@payloadcms/ui/scss';

.admin-bar {
  @include small-break {
    display: none;
  }
}

Environment Info

最新版本

[lohnsonok]

Cannot find module or type declarations for side-effect import of '@payloadcms/next/css'

I think the latest version is broken

[lohnsonok]

The new path is now '@payloadcms/ui/styles.css'

But it not work for me

The hack that work :

import '@payloadcms/next/css'

then create payload-css.d.ts with
declare module '@payloadcms/next/css' {}

and the build will pass

[Chthol1y]

I hit the same issue. In a Turborepo setup, it seems to happen when upgrading dependencies all at once.

What worked for me was:

• keep TypeScript at 5.9.3 instead of upgrading to 6.0.2, since 5.9.3 was the version I used before the dependency upgrade.
• not modifying any files under the (payload) directories