Next.js中CSS Module如何继承Bootstrap等第三方全局样式类？

报错原因 #

CSS Modules的SCSS文件为独立编译作用域，你仅在全局style.scss中引入的Bootstrap SCSS定义，不会被其他module.scss文件共享，因此Footer.module.scss识别不到Bootstrap定义的.container类，才会抛出选择器不存在的错误。

最优解决方案（按优先级排序） #

方案1：JSX直接组合类名（最推荐，无额外配置/编译成本）

不需要在SCSS中做继承操作，Bootstrap的全局类已经通过你引入的全局SCSS生效，直接给组件同时绑定Bootstrap类和自定义模块类即可：

// Footer.jsx
import styles from './Footer.module.scss'

export default function Footer() {
  return <footer className={`container ${styles.myClass}`}>
    {/* 组件内容 */}
  </footer>
}

方案2：模块SCSS按需引入Bootstrap依赖

如果确实需要在SCSS中继承Bootstrap的类，在Footer.module.scss顶部引入Bootstrap对应的编译依赖即可，这些依赖仅为编译时使用的变量、函数、 mixin，不会产生冗余样式：

// Footer.module.scss 顶部添加
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/grid'; // 包含.container的类定义

.myClass {
  @extend .container;
}

Next.js默认支持~作为node_modules目录的别名，不需要额外配置。

方案3：全局自动注入公共SCSS（多模块复用场景更高效）

如果有多个模块都需要用到Bootstrap的SCSS能力，可以配置全局自动注入公共依赖，不需要每个模块手动引入：

1. 新建公共依赖文件styles/bootstrap-helpers.scss：

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/grid';

2. 修改next.config.js配置：

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
    prependData: `@import "bootstrap-helpers.scss";`
  }
}

配置后所有SCSS文件（包括module.scss）都会自动导入上面的公共依赖，可直接使用Bootstrap的SCSS能力。

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