HTML文件无法识别Sass文件，SCSS样式在站点不生效该如何解决？

一、编译配置类问题（占比最高） #

• 检查SCSS依赖及编译工具配置
  确认项目已安装官方推荐的sass依赖（原node-sass已停止维护，易出现版本兼容问题，建议直接替换为sass）。
  对应不同的构建工具检查匹配规则：
  • Vite项目：确认没有错误配置css.preprocessorOptions阻断SCSS编译，无需额外配置loader，只要安装sass依赖即可识别.scss文件
  • Webpack项目：确认module.rules中loader顺序正确，加载顺序从右到左为sass-loader -> css-loader -> style-loader/mini-css-extract-plugin，顺序错误会直接导致编译失败无样式输出
• 检查编译日志是否存在报错
  SCSS语法错误（变量未定义、混合器传参错误、嵌套规则写错）会直接中断编译，导致所有样式不输出。开发环境查看终端报错，生产环境查看构建日志，先修复所有语法类错误再验证效果。

二、文件导入类问题 #

• 校验导入路径正确性
  若在入口js/ts文件中引入全局SCSS，确认路径拼写正确，相对路径层级无误，若未配置后缀自动识别需要补全.scss后缀。
  若使用@use导入SCSS模块，注意@use默认带命名空间，例如@use './variable.scss'导入后，调用变量需要写variable.$color-primary，未加命名空间会报变量未定义导致编译失败，不需要命名空间可写为@use './variable.scss' as *。
• 确认导入的SCSS文件存在有效样式内容，无空文件或全注释内容的情况。

三、样式匹配类问题 #

• 检查选择器优先级
  打开浏览器开发者工具的元素面板，若SCSS编译后的CSS规则存在但被划掉，说明被更高优先级的规则覆盖（行内样式、!important规则、更高权重选择器），调整选择器权重或样式加载顺序即可。
• 确认CSS Modules调用方式正确
  若SCSS文件命名为xxx.module.scss，需要通过导入对象调用类名，示例：import styles from './index.module.scss'，调用时写className={styles.xxx}，直接写字符串类名无法匹配到对应样式。

四、缓存类问题 #

开发环境删除node_modules/.cache文件夹后重启开发服务，生产环境清空CDN缓存、浏览器硬刷新后再验证，避免旧缓存资源未更新导致样式不生效。

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