AWS部署现有Vue.js项目执行npm run serve报Node Sass未定义变量错误

问题原因判定 #

该问题不是Vue.js安装异常导致，报错属于Sass预处理器编译阶段的异常，是代码中使用的$info变量没有被预先定义或引入导致，和Vue框架本身的安装状态无关。

排查解决步骤 #

• 检查全局Sass变量的引入顺序
  找到项目中存放全局Sass变量的文件（通常命名为variables.scss、global.scss等），确认在scafholding.scss或全局样式入口app.scss中，变量文件的引入顺序早于所有使用变量的样式文件。如果变量文件引入在scafholding.scss之后，就会出现变量未定义的报错，调整引入顺序即可。
• 检查全局变量自动注入配置
  如果项目通过vue.config.js（Webpack项目）或vite.config.js（Vite项目）配置了全局Sass变量自动注入，需要确认配置中的变量文件路径和实际路径一致，没有拼写错误。
  Vue2+Webpack项目的参考配置如下（注意sass-loader版本不同对应参数名不同，v10及以上版本用additionalData，旧版本用prependData）：

  module.exports = {
    css: {
      loaderOptions: {
        sass: {
          additionalData: `@import "@/assets/scss/你的变量文件名.scss";`
        }
      }
    }
  }
  

• 验证依赖安装完整性
  可以删除本地的node_modules文件夹、package-lock.json或yarn.lock文件后，重新执行npm install安装所有依赖，再执行npm run serve测试是否恢复正常。
• 检查变量名称拼写
  打开全局变量定义文件，确认存在$info变量，没有大小写错误、拼写错误。

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