css - 如何在 Next.js 中正确自定义 React-Bootstrap Saas 变量？

Question

我正在开发一个新的 Next.js 项目，我很难在我的项目中自定义引导 sass 变量，就像这样：https ://react-bootstrap.github.io/getting-started/introduction/ #customize-bootstrap。但这引发了以下错误：

选择器 ":root" 不是纯的（纯选择器必须至少包含一个本地类或 id）

我在这篇文章中发现，出于某种原因，Next.js 只允许在根 App 组件中使用全局 CSS。所以我在我的 global.scss 文件中导入了引导程序，我在 _app.tsx 中导入了该文件。

我的目录如下所示：

pages
  ⌞ _app.tsx
  ⌞ index.tsx
styles
  ⌞ global.scss

在 _app.tsx 中，

import '../styles/globa.scss'
import 'bootstrap/dist/css/bootstrap.min.css';

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

在 global.scss 中，

@import './variables'

$primary: red;

@import '/node_modules/bootstrap/scss/bootstrap';

但这不会改变我的主要按钮颜色。我也尝试过处理其他变量，但它们都没有真正起作用。我将不胜感激任何想法或任何方法来调试变量是否设置正确。谢谢！

依赖项：

• 下一个 11.1.0
• 反应 17.0.2
• 反应引导 1.6.1
• 助推器 5.1.0

标签： csssassnext.jsreact-bootstrapbootstrap-5