Next.js项目引入SCSS模块报错：Selector 'html'非纯选择器

问题根源 #

你把Tailwind基础样式、NProgress这类全局样式塞进了.module.scss文件里，但SCSS模块的规则是强制所有选择器必须带局部类/id，而Tailwind的base样式里包含html、body这类全局选择器，直接触发了冲突报错。

修复步骤 #

1. 拆分全局与模块样式文件
   把main.module.scss重命名为main.scss（去掉.module后缀），因为里面的内容都是全局样式，不适合用SCSS模块的局部作用域规则。

2. 精简main.scss内容
   删掉重复的Tailwind引入，用官方推荐的指令写法：

   // ./src/styles/main.scss
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   // NProgress style.
   @import 'nprogress/nprogress.css';
   

3. 调整_app.js的引入方式
   全局样式直接引入，局部模块样式保留原写法：

   // 全局样式（无.module后缀）
   import '../src/styles/main.scss';
   // 局部模块样式（保留.module后缀）
   import '../src/styles/style.module.scss';
   

额外说明 #

• Next.js里全局样式只能在_app.js/_app.tsx中引入，一个项目尽量只保留一个核心全局样式文件。
• .module.scss仅用于组件级的局部样式，用来避免样式污染，全局样式必须用普通的.scss/.css文件。

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