Question

同一段css分别在IE，火狐，谷歌debug查看属性出现的不同现象

这是一段scss文件中的代码，用了foundation，我不是设计不太懂怎么描述，，，但是项目通过webpack4打包，结果在三个浏览器中都显示是有问题的，但在火狐中却不影响显示，而在IE和谷歌却完全无效，求大神解释，这些css在IE被画红波浪，在火狐中后面加了感叹号，在谷歌中前面加了感叹号是什么意思？有大神知道这是什么原因吗？是浏览器兼容性问题还是webpack4打包配置的问题呢？





Answer 1

你这是SCSS文件，它需要经过编译之后生成CSS代码，理论上打包之后得到的应该是编译过的CSS文件而非scss文件。
你仔细看：你的截图中很多样式值都带有“$”符号（$开头的这些是SCSS变量，要经过计算），这些都算是CSS语法错误，浏览器没法解析它们，不生效报错是必然的。

webpack4打包的时候设置下，把SCSS编译成CSS再打包输出。