如何在.vue文件中使用.scss文件的mixin？解决‘no mixin named sm’报错

我来帮你搞定这个问题～你遇到的「no mixin named sm」报错，核心原因是你的Vue单文件组件没有正确加载到存放在assets/styles/_mixins.scss里的mixin文件，导致SCSS编译器找不到sm这个mixin定义。下面给你两种实用的解决方法，按需选择：

方法一：全局导入（所有组件无需重复导入） #

如果你的项目里很多组件都要用到这些mixin，全局导入是最高效的方式，只需要配置一次，所有组件都能直接使用。

Vue CLI 项目配置 #

在项目根目录的vue.config.js文件中添加以下配置（如果没有这个文件就新建一个）：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // 注意：sass-loader v8及以下版本请用`prependData`代替`additionalData`
        additionalData: `@import "@/assets/styles/_mixins.scss";`
      }
    }
  }
}

配置完成后重启开发服务器，之后所有.vue文件的