我想同时使用 bootstrap 类和 next.js 模块

Question

我想在 next.js 模块中一起使用引导类和我的定义。我该怎么做？

Answer 1

首先，将您的重命名.header-top为.headerTop in header.module.scss。

然后，包含您的班级名称：

<div className={`${styles.headerTop} container d-flex ...`}>

说明： CSS 模块中的类名会自动处理，使其唯一以确保作用域。例如，.headerTop将变成类似.header_headerTop__JnCx9（.fileName_className_randomString）的内容。因此，在组件中，您需要将类名作为 JavaScript 表达式而不是字符串包含在内。也就是说，如果你有一个类名，你会这样做：<div className={styles.headerTop}></div>。但在您的情况下，您希望在引导类（不是 CSS 模块）中包含您自己的类名。一种方法是使用模板文字，它允许在字符串中包含表达式。

Answer 2

您需要先安装引导程序。

npm install --save bootstrap

您只能在 NextJS 的一个位置导入 css。

创建pages/_app.js并导入css文件。

import 'bootstrap/dist/css/bootstrap.min.css';