你仔细看：你的截图中很多样式值都带有“$”符号（$开头的这些是SCSS变量，要经过计算），这些都算是CSS语法错误，浏览器没法解析它们，不生效报错是必然的。
webpack4打包的时候设置下，把SCSS编译成CSS再打包输出。
css3对不同浏览器需要不同的标识
-webkit-//代表chrome浏览器
-ms-//代表微软的ie
-o-//代表opera浏览器
-moz-//代表firefox浏览器
例如：
<style>*
{
-webkit-box-shadow: 0 0 1px black
-moz-box-shadow: 0 0 1px black
box-shadow: 0 0 1px black
}
</style>
以上就是添加了支持的box-shadow样式。
你说火狐浏览器显示不正确很有可能是因为有些样式没有添加对火狐浏览器的支持，也就是-moz-这个。
尊敬的用户，您好！很高兴为您答疑。出现此类问题一般有2种可能。1、您引入css样式的代码中部分特殊字符书写错误，而有的浏览器对该字符敏感，则无法正确识别css文件路径；2、您为文件指定的编码格式与您css文件的编码格式不相符，导致文件识别错误，无法正常加载。
希望我的回答对您有所帮助，如有疑问，欢迎继续咨询我们。
