Next.js搭配SCSS Modules与Bootstrap时报SassError目标选择器未找到怎么办？

问题原因 #

• 文件存放路径错误：Next.js的/public目录仅用于存放可直接对外访问的静态资源（如图片、字体、静态网页等），放在该目录下的SCSS源文件不会被构建流程中的sass-loader编译处理，导致你导入的Bootstrap网格相关类没有被正确生成。
• SCSS Modules作用域隔离冲突：你当前使用的是.module.scss后缀的模块化样式文件，默认会对文件内所有类名做哈希重命名实现作用域隔离，你导入的Bootstrap原生类会被自动加上哈希后缀，@extend查找原始类名.container-fluid自然无法匹配。

解决步骤 #

1. 调整SCSS文件存放位置
   把/public/scss/common.scss移动到项目根目录的/styles目录下（无该目录可直接新建），同时修改文件内的Bootstrap导入路径，sass-loader默认会自动解析node_modules下的依赖，无需写冗长的相对路径：

// /styles/common.scss 内容
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/grid';

2. 修改样式文件写法，二选一即可

方案1：保留SCSS Modules，标记全局类扩展 #

如果你需要保留当前文件的模块化隔离特性，只需在@extend时标记目标类为全局作用域：

// /styles/components/Footer.module.scss
@import '../common.scss';

.footer {
  @extend :global(.container-fluid);
}

方案2：关闭当前文件的模块化 #

如果该Footer组件样式本身就是全局通用的，直接把文件名改为Footer.scss，去掉.module后缀即可关闭模块化编译，原有@extend .container-fluid写法可直接生效。

3. 可选优化配置
   如果不想每次导入公共SCSS文件都写相对路径，可在next.config.js中添加sass路径配置：

// next.config.js
const path = require('path')
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

配置完成后，你在任意SCSS文件中都可以直接写@import 'common.scss';，无需写相对路径。

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