NuxtJs中使用@include调用Sass混合宏提示‘undefined mixin’问题求助

出现这个错误的核心原因是：组件的SCSS代码没有正确导入包含mq混合宏的variables.scss文件，导致编译器无法识别该混合宏。以下是几种可行的解决方法：

方法1：单个组件手动导入 #

在使用混合宏的组件<style>标签开头，手动导入variables.scss文件：

<style lang="scss">
// 导入混合宏定义文件
@import '~/assets/variables.scss';

.cardSmall {
  @include mq(laptop) {
    width: 720px;
  }
}
</style>

注意路径要准确，~/是Nuxt中指向项目根目录的别名，确保assets/variables.scss确实存在于对应位置。

方法2：全局自动导入（推荐） #

如果多个组件都需要使用这个混合宏，手动导入太繁琐，可以配置全局自动导入，让所有组件的SCSS代码都能访问到该混合宏。

针对Nuxt 2项目 #

1. 先安装@nuxtjs/style-resources依赖：

npm install @nuxtjs/style-resources --save-dev

2. 修改nuxt.config.js，添加模块配置：

export default {
  modules: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
    scss: [
      '~/assets/variables.scss'
    ]
  }
}

针对Nuxt 3项目 #

修改nuxt.config.ts（或nuxt.config.js），配置SCSS预处理器的全局导入：

export default defineNuxtConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 使用@use语法（推荐，符合SCSS新规范）
        additionalData: '@use "~/assets/variables.scss" as *;'
        // 或者使用@import语法
        // additionalData: '@import "~/assets/variables.scss";'
      }
    }
  }
})

额外注意事项 #

• 检查依赖兼容性：node-sass已被官方弃用，建议替换为dart-sass（即sass包），避免版本兼容问题：

npm uninstall node-sass
npm install sass --save-dev

• 确认文件路径：确保variables.scss的存放位置和配置中的路径一致，避免因路径错误导致导入失败。

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