记：登录跳转到首页样式丢失问题排查解决

问题描述

最近项目出现个很奇怪的问题，网上找了很久都没找到原因，最后自己捣鼓解决。前端项目为vue2.6.12+elementUI，在main.js中引入自定义的scss文件覆盖elementUI样式，但是在登录成功跳转到首页时出现了样式丢失的问题，查看后发现样式反而被elementUI的样式覆盖，但是在刷新页面后样式恢复正常。

---

原因分析：

样式文件均在main.js中引入，如下图所示：

经过排查发现，登录页面引入了element-variables.scss文件，用到了内部的公共属性。打开文件后发现其内部引入了elementUI样式，猜测是在登录跳转时，由于缓存原因样式表未刷新，导致首页样式被覆盖。

解决方案：

找到了原因，只需要让scss按顺序加载即可，这里不直接删除引入的原因是因为页面用到了内部公共属性，不好将其写死，而且样式文件中也引入了element-variables.scss文件，所以我需要用更好的方法解决。故采用sass-loader按顺序预编译scss文件：

修改自定义的样式文件，删除其中的element-variables.scss文件引用，在vue.config.js文件中添加sass预编译配置。修改代码后本地编译运行测试，发现登陆后跳转到首页样式正常，问题解决。以下是添加的sass-loader配置：

module.exports = {
	css: {
		loaderOptions: {
	      scss: {
	        additionalData:
	            `@import '@/assets/styles/element-variables.scss';
	             @import '@/assets/styles/agx.scss';`
	      }
	    }
  	}
}

注意：sass-loader和其依赖node-sass相关，本机node版本14.x，对应node-sass版本为5.x，sass-loader版本为10.x。若编译不通过，需变本机node对应版本，另外sass-loader版本为8.x以下，vue.config.js中scss配置处为data，8.x及以上为additionalData。

以上是我自己捣鼓出来的，希望后来人能少走弯路，如本文对你有帮助的话，希望能动动你们发财的小手随手点个赞支持下哈！