
如上图所示,在一个 css 文件中添加层叠样式时报红:at-rule or selector expected,意思就是说我们的语句不符合 css 的语法书写规范,虽然不会导致启动报错并且还能达到预期的样式效果,但是对于有强迫症的同学来说就苦恼了,因为整个文件标上了大红色。解决方案就是我们只需要换一种书写方式即可,改为如下格式(效果是一样的):

分析:css 文件有自己的一套书写规范,需要遵循才不会报红,但同样的书写方式放在 vue 文件中却是没有任何问题的(严谨地说也是会有同样的提示,只不过在 style 标签内增加了 lang="less" 后才不会报红,有兴趣的同学可以去试试),如下所示:
