Next.js中使用SCSS Mixins时媒体查询失效问题排查

1. Next.js配置文件的覆盖问题 #

你当前的next.config.js存在重复导出的问题，后面的module.exports完全覆盖了前面withSass的配置，导致cssModules: true和withSass的配置未生效。正确写法需要把sassOptions合并到withSass的配置对象中：

const path = require('path')
const withSass = require('@zeit/next-sass');

module.exports = withSass({
    cssModules: true,
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')]
    },
})

2. SCSS媒体查询变量的语法错误 #

你的$max-hd和$max-md变量被定义成了带引号的字符串，在媒体查询中使用时，Sass会直接把引号内容作为字符串插入，导致生成的CSS媒体查询语法无效。比如浏览器会收到这种错误格式的代码：

@media screen and ("max-width: (1739px)") { ... }

这种写法不符合CSS规范，会被浏览器直接忽略。

正确的变量定义要去掉引号，直接写媒体条件表达式：

$max-md: max-width (#{$break-md - 1px});
$max-hd: max-width (#{$break-hd - 1px});

或者更简洁的写法：

$max-md: max-width #{break-md - 1px};
$max-hd: max-width #{break-hd - 1px};

这样生成的媒体查询会是标准格式：

@media screen and (max-width: 1739px) { ... }

3. 全局样式与CSS Modules的冲突 #

你开启了cssModules: true，但直接导入全局SCSS文件时，Next.js会默认按CSS Modules处理，可能导致样式作用域混乱或不生效。

可以通过两种方式解决：

• 修改导入语句，标记为全局样式：

import '../styles/main.scss';
// 若上述方式无效，可在SCSS文件中用:global包裹全局样式代码

• 在配置文件中排除全局样式目录，不启用CSS Modules：

module.exports = withSass({
    cssModules: true,
    cssModules: {
        exclude: /styles\/.*\.scss$/
    },
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')]
    },
})

调试技巧 #

• 打开Chrome开发者工具的Sources面板，在webpack://路径下能找到编译后的CSS文件，可查看实际生成的样式是否符合预期。
• 运行next dev --debug开启调试模式，能看到更多编译过程的日志信息。

内容的提问来源于stack exchange，提问作者Raphael Aleixo