CSS在Firefox正常生效，Edge/Chrome加载后不生效的问题求助

核心原因 #

你的CSS代码里写了Sass专属的变量语法 $color-primary-white: rgb(1, 240, 240);，但文件后缀是.css——原生浏览器不支持Sass变量，不同浏览器的错误处理逻辑不一样：

• Firefox会跳过这行无效代码，继续解析后面的样式
• Chrome和Edge遇到这个语法错误后，会中断后续CSS规则的解析，导致样式无法正常应用

解决办法 #

方法1：直接移除无效代码 #

如果这个变量没被实际使用，直接删掉$color-primary-white: rgb(1, 240, 240);这一行即可。

方法2：配置Sass编译（如果需要用变量） #

如果确实需要使用Sass特性：

1. 把CSS文件后缀改成.scss
2. 在Django项目中配置Sass编译工具（比如django-compressor搭配libsass），将Sass文件编译成浏览器能识别的普通CSS

验证步骤 #

修改后用Chrome/Edge的开发者工具（F12）确认：

• 「Elements」面板的「Styles」标签下，检查元素是否能看到你的CSS规则
• 「Network」面板刷新页面，查看style.css的返回内容，确保没有无效的Sass语法
• 强制刷新页面（Ctrl+Shift+R），确保浏览器加载最新的CSS文件

修改后的CSS示例 #

*{
margin: 0;
padding: 0;
}

#label1{
  color: red;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px;
  font-family: 'Roboto', sans-serif;
}

.card {
  width: 24rem;
  height: 36rem;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  color: #fff;
  box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
}

.card_img {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  transition: opacity .2s ease-out;
}

.card_name {
  position: absolute;
  inset: auto auto 30px 30px;
  margin: 0;
  transition: inset .3s .3s ease-out;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
}

.card_desc {
  position: absolute;
  opacity: 0;
  max-width: 80%;
  transition: opacity .3s ease-out;
  inset: auto auto 80px 30px;
}

.card_desc {
  inset: auto auto 80px 30px;
}

.card:hover .card_name {
  inset: auto auto 220px 30px;
  transition: inset .3s ease-out;
}

.card:hover .card_desc {
  opacity: 1;
  transition: opacity .5s .1s ease-in;
}

.card:hover .card_img {
  transition: opacity .3s ease-in;
  opacity: 1;
}

.material-symbols-outlined {
  vertical-align: middle;
}

内容的提问来源于stack exchange，提问作者3llm3r _