Next.js中react-big-calendar+Sass模块找不到错误的解决

1. 修正样式文件导入路径（按版本区分） #

react-big-calendar不同版本的样式文件存放路径有调整，对应修改导入语句即可：

• v9及更早版本：补全文件后缀，使用完整路径导入

  import 'react-big-calendar/lib/sass/styles.scss';
  

• v10+版本：官方已调整样式文件位置，改用以下任一路径导入

  import 'react-big-calendar/dist/styles.scss';
  // 或
  import 'react-big-calendar/lib/styles.scss';
  

2. 解决styles.module.scss中@import无效的问题 #

CSS Modules会对样式做作用域隔离，直接在.module.scss中导入第三方样式会被限制，可通过两种方式处理：

• 用:global包裹导入语句，解除作用域限制

  :global {
    @import 'react-big-calendar/dist/styles.scss';
  }
  

• 更推荐的方案：在项目全局样式文件（如index.scss、App.scss这类非Module格式的样式文件）中导入日历样式，确保样式全局生效。

3. 额外检查项 #

• 确认项目已安装Sass编译依赖（推荐使用sass，node-sass已废弃）：

  npm install sass --save-dev
  # 或
  yarn add sass -D
  

• 检查项目构建工具（如Webpack、Vite）的Sass解析配置是否正常，确保能正确处理.scss文件。

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