NextJS App Router(TS)中react-bootstrap与global.scss样式冲突求助

问题现象 #

• 导入react-bootstrap后，global.scss的所有样式规则完全失效；移除该导入后，global.scss样式恢复正常
• 存在一个依赖版本完全一致的项目可正常运行，对比配置未发现差异
• 单独导入Bootstrap的JS和CSS文件时，仅CSS导入能正常工作

相关代码与配置 #

全局layout.tsx #

import '@styles/globals.scss';
import { Inter } from 'next/font/google'

import dynamic from 'next/dynamic';
// Components
import Navigation from '@components/Navigation';
import Footer from '@components/Footer';
const inter = Inter({ subsets: ['latin'] })

const DynamicBootstrap = dynamic(
  () => require('bootstrap/dist/js/bootstrap.min.js'),
  { ssr: false }
);
import 'bootstrap/dist/css/bootstrap.min.css';

依赖包列表 #

"dependencies": {
  "@next/bundle-analyzer": "^13.4.5",
  "@paypal/react-paypal-js": "^8.0.0",
  "@types/node": "20.2.5",
  "@types/react": "18.2.8",
  "@types/react-bootstrap": "^0.32.32",
  "@types/react-dom": "18.2.4",
  "animejs": "^3.2.1",
  "bootstrap": "^5.3.0",
  "bootstrap-icons": "^1.10.5",
  "eslint": "8.42.0",
  "eslint-config-next": "13.4.4",
  "next": "13.4.4",
  "react": "18.2.0",
  "react-bootstrap": "^2.7.4",
  "react-bootstrap-icons": "^1.10.3",
  "react-dom": "18.2.0",
  "sass": "^1.63.4",
  "swr": "^2.1.5",
  "typescript": "5.1.3"
},
"devDependencies": {
  "node-cmd": "^5.0.0",
  "node-ssh": "^13.1.0"
}

tsconfig.json配置 #

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ],
      "@components/*": [
        "./src/components/*"
      ],
      "@styles/*": [
        "./src/styles/*"
      ],
      "@assets/*": [
        "./src/assets/*"
      ],
      "@middlewares/*": [
        "./src/middlewares/*"
      ],
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

解决方案尝试 #

1. 调整样式导入顺序：将global.scss的导入放在Bootstrap CSS之后，利用CSS优先级规则让自定义全局样式覆盖Bootstrap样式。修改后的导入顺序：

import { Inter } from 'next/font/google'
import dynamic from 'next/dynamic';
// Components
import Navigation from '@components/Navigation';
import Footer from '@components/Footer';
const inter = Inter({ subsets: ['latin'] })

const DynamicBootstrap = dynamic(
  () => require('bootstrap/dist/js/bootstrap.min.js'),
  { ssr: false }
);
import 'bootstrap/dist/css/bootstrap.min.css';
import '@styles/globals.scss'; // 移至Bootstrap CSS之后

2. 排查重复样式注入：react-bootstrap默认会自动引入Bootstrap CSS，可能与你手动导入的bootstrap/dist/css/bootstrap.min.css重复，且自动注入的样式优先级更高。可以尝试移除手动的Bootstrap CSS导入，仅保留react-bootstrap依赖；或者在global.scss中针对需要覆盖的样式使用更具体的选择器（例如结合自定义类名）。

3. 清除缓存重建项目：NextJS的缓存可能导致依赖解析异常，执行以下命令清除缓存后重新构建：

rm -rf .next node_modules package-lock.json
npm install
npm run build

4. 提升全局样式选择器优先级：避免在global.scss中使用过于宽泛的选择器，针对需要覆盖的Bootstrap样式，使用更具体的选择器组合（如元素+自定义类名），必要时可临时使用!important标记（不推荐长期使用）。

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