Angular项目styles.css出现CSS语法错误：colon expected等问题求助

嘿，我一眼就看出问题所在了——你写的是SCSS（Sass）的嵌套选择器语法，但文件后缀是.css。普通CSS并不支持这种嵌套写法，所以编辑器会把嵌套的代码判定为无效语法，抛出你看到的这两个错误：

• colon expected css(css-colonexpected)：因为在普通CSS里，不能在#content的大括号内直接嵌套ul {，必须用完整的层级选择器
• at-rule or selector expected css(css-ruleselectorexpected)：同样是嵌套结构导致的语法不符合普通CSS规范

下面给你两种解决方案，选适合你的就行：

方案1：改用SCSS格式（推荐，适配你的嵌套写法） #

如果你想继续用这种简洁的嵌套语法，只需要几步操作：

1. 把src/styles.css重命名为src/styles.scss
2. 打开angular.json文件，找到styles数组，把里面的styles.css替换成styles.scss，示例如下：

"styles": [
  "src/styles.scss"
],

3. 重启你的Angular开发服务器（如果之前开着的话），之后Angular会自动编译SCSS语法，编辑器也会正确识别，错误提示就消失啦。

方案2：改成普通CSS语法（放弃嵌套） #

如果不想用SCSS，就把嵌套的选择器展开成普通CSS的层级写法，修正后的代码如下：

body { 
  margin: 0; 
  background: #F2F2F2; 
  font-family: 'Montserrat', sans-serif; 
  height: 100vh; 
}

#container { 
  display: grid; 
  grid-template-columns: 70px auto; 
  height: 100%;
}

#container #content { 
  padding: 30px 50px;
}

#container #content ul {
  list-style-type: none; 
  margin: 0;
  padding: 0;
}

#container #content ul li { 
  background: #fff; 
  border-radius: 8px; 
  padding: 20px; 
  margin-bottom: 8px;
}

#container #content ul li a { 
  font-size: 1.5em; 
  text-decoration: none; 
  font-weight: bold; 
  color:#00A8FF; 
}

#container #content ul li ul { 
  margin-top: 20px;
}

#container #content ul li ul li { 
  padding:0;
}

#container #content ul li ul li a { 
  font-size: 1em; 
  font-weight: 300; 
}

这样修改后，代码完全符合普通CSS的语法规范，错误提示就会消失。

内容的提问来源于stack exchange，提问作者David