Next.js使用SCSS模块时自定义mixins不生效如何解决？

核心原因排查&修复步骤 #

1. 修正配置项命名错误 #

Next.js新版依赖的sass-loader v10+ 已经废弃prependData配置项，替换为additionalData，这是绝大多数配置失效的原因。

2. 调整next.config.js sass配置 #

const path = require('path');

module.exports = {
  sassOptions: {
    // 配置样式文件查找路径，避免写长路径
    includePaths: [path.join(__dirname, 'src/styles')],
    // 全局注入mixin，as * 可省略命名空间直接调用
    additionalData: `@use 'mixins' as *;`
  }
};

如果需要保留命名空间写法，将as *改为as mixins即可。

3. 确认主题类已挂载到根节点 #

你的mixin生成的样式规则为.theme-xxx 模块类名，必须在应用根节点（比如_app.tsx的外层容器、body标签）添加对应主题类才能匹配到样式，示例：

// _app.tsx
import type { AppProps } from 'next/app'
import './globals.scss'

export default function App({ Component, pageProps }: AppProps) {
  // 可根据状态动态切换theme-light / theme-dark
  return <div className="theme-light">
    <Component {...pageProps} />
  </div>
}

4. 调整SCSS模块调用写法 #

配置as *后可直接调用mixin和方法：

// Content.module.scss
.content {
  &>.test {
    height: 200px;
    @include themed() {
      background: choose('primary-color');
    } 
  }
}

验证方法 #

编译项目后查看生成的CSS文件，若存在.theme-light .content_test_xxxx { background: #00f7ff; } 类似规则则说明mixin已生效，仅需确认主题类是否正确挂载即可。如果未生成对应规则，可先在SCSS模块顶部手动添加@use 'src/styles/mixins.scss' as *; 排查是否为全局注入配置问题。

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