NextJS中如何限制Bootstrap CSS作用域仅作用于Navbar不污染全局样式

问题出错原因 #

1. 原生CSS不支持在选择器内部使用@import规则，只有Sass/Less等CSS预处理器支持嵌套导入语法，会自动给导入文件内的所有选择器加上父级前缀，你直接在普通CSS里写嵌套@import，浏览器会直接忽略父级类，要么把Bootstrap样式全局导入，要么完全不生效。
2. 你代码里外层div的类名写法错误：className={style.bootstrap}是CSS Modules的专用写法，只有当你的样式文件命名为xxx.module.css/xxx.module.scss时，才能通过style对象拿到哈希后的类名，如果你用的是普通后缀的样式文件，style.bootstrap为undefined，外层div根本没有加上对应的类名，自然匹配不到嵌套的Bootstrap样式。

正确实现步骤 #

步骤1：安装Sass依赖 #

Next.js原生支持Sass，直接安装即可：

npm install sass --save-dev

步骤2：创建作用域样式文件 #

新建命名为scoped-bootstrap.module.scss的文件，写入以下内容（推荐只导入Navbar需要的相关样式，体积更小无冗余，需要全量样式可以直接导完整的bootstrap scss文件）：

.bootstrap {
  // 基础依赖
  @import "bootstrap/scss/functions";
  @import "bootstrap/scss/variables";
  @import "bootstrap/scss/mixins";
  // Navbar相关组件样式
  @import "bootstrap/scss/navbar";
  @import "bootstrap/scss/nav";
  @import "bootstrap/scss/dropdown";
  @import "bootstrap/scss/container";
  @import "bootstrap/scss/utilities";
}

步骤3：修改Navbar组件代码 #

导入上面的样式文件，保持原有Navbar逻辑不变即可：

// 导入作用域样式
import style from './scoped-bootstrap.module.scss'

const Navbar2 = () => {
  return (
    <div className={style.bootstrap}>
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
            <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
            </NavDropdown>
          </Nav>
          <Nav>
            <Nav.Link href="#deets">More deets</Nav.Link>
            <Nav.Link eventKey={2} href="#memes">
              Dank memes
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
        </Container>
      </Navbar>
    </div>
  )
}

补充说明 #

如果不想用CSS Modules，可以把scss文件命名为scoped-bootstrap.scss（不加.module后缀），在项目全局样式中导入该文件，外层div直接写className="bootstrap"也可正常生效。注意确保你安装的Bootstrap版本和React-Bootstrap版本兼容：React-Bootstrap 2.x对应Bootstrap 5.x，React-Bootstrap 1.x对应Bootstrap 4.x，版本不匹配也会导致样式不生效。

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