Next.js导入bootstrap.scss报Global CSS cannot be imported错误求助

云原生阿岚

2026-10-3

报错原因

Next.js 内置了全局样式导入限制：全局CSS、SCSS文件仅允许在项目的根入口文件中导入，若在普通组件、业务页面等非根入口文件中导入，就会触发该报错。另外如果项目未安装sass依赖，也会导致SCSS格式的全局样式识别异常触发报错。

解决方案

第一步先安装sass依赖，Next.js处理SCSS需要该依赖包支持：

npm install sass
# 或者用yarn
yarn add sass
# 或者用pnpm
pnpm add sass

第二步根据你使用的路由模式对应调整：

Pages Router（你的app.tsx存放在`/pages`目录下，为自定义App文件）

按默认规则/pages/_app.tsx是允许导入全局样式的，出现报错可以调整导入方式规避：

打开你项目中的/styles/globals.scss文件，在顶部添加导入bootstrap的语句，不需要写全node_modules路径，Next.js会自动解析：

@import "bootstrap/scss/bootstrap";
// 你自己的其余全局样式写在下方

修改/pages/_app.tsx的样式导入部分，删掉直接导入bootstrap的语句即可，修改后参考代码：

import type { AppProps } from "next/app";
import React from "react";

// 样式导入
import "tippy.js/dist/tippy.css";
import "tippy.js/animations/perspective-subtle.css";
import "tippy.js/themes/light.css";
import "../styles/globals.scss";
import "react-toastify/dist/ReactToastify.css";

// 组件逻辑保持不变
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}