在scss模块中导入Bootstrap组件

Question

我可以在 Nextjs 项目中执行以下操作吗？ 我有一个 global.scss 文件，在其中导入必要的 Bootstrap scss 文件，但我不想加载所有内容，仅在需要时加载它们，例如当我导入组件时。 我为每个组件都有一个 scss 模块，例如src/components/global-nav/global-nav.module.scss 我尝试导入 modal.scss 但没有成功：

@import "../../styles/variables";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

@import "~bootstrap/scss/modal";

在 global-nav.tsx 文件中，我像这样导入：

import styles from './global-nav.module.scss';

以及其他所有内容（如果与模态样式分开）。

在 next.config js 文件中我有：

sassOptions: {include paths: ["node_modules", "./node_modules"]}

但我没有帮忙。

Answer 1

1. 避免使用较新版本，删除

   ~

   。
2. 尝试使用这个

   sassOptions: { includePaths: [path.join(__dirname, 'styles'), 'node_modules'], }