问题:静态页面样式和vue动态页面的样式不统一。截图了一个角落:
![](https://i-blog.csdnimg.cn/blog_migrate/e7206567de67df870bd91b73c803d04f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/42e10dbada0111061402492a39783ffa.png)
需求:静态页面的样式要和动态页面的一样
解决步骤:
F12 查看样式文件引用的区别
找到vue动态页面中的样式区别是在vue项目中用了自带的scss文件
将文件引入到静态页面的文件夹中,发现新的问题,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/91325e64f5b99665d557d8cfc2e16439.png)
原因是html文件中不能引入scss文件
查阅资料后解决方式:
①、静态页面对应的scss文件夹下安装sass
npm install -g sass
②、使用sass将scss文件转换成css文件
sass argon.scss .\css\argon.css 【意思是:将argon.scss文件转成argon.css,并放在同级的css文件夹中】
③、最后再在页面head中引入这个转换后的css文件即可解决!
![](https://i-blog.csdnimg.cn/blog_migrate/3e9a21bba100b417208d2c8d9d9329fa.png)