直接打开本地项目文件时CSS不生效 仅live-server下正常求助

• 自定义样式加载仅在通过live-server启动的本地服务环境下可正常生效
• 直接通过file协议打开项目本地文件时，所有JS功能运行正常，但完全无法加载自定义CSS，页面仅呈现浏览器默认的黑白无样式布局
• 项目技术栈包含Sass、Live Sass Compiler，同时集成Leaflet地图API、OpenWeather API，目前无法定位file协议打开、跨浏览器访问时样式缺失的具体原因

静态资源引入路径校验 #

这是该类问题最常见的原因：

• 排查HTML中CSS文件的引入路径，禁止使用根路径绝对路径写法：如/dist/css/main.css这类写法在file协议下会被解析为磁盘分区根目录路径，完全无法匹配到本地项目文件；而live-server启动时会将项目根目录映射为服务根路径，因此这类路径在服务环境下可以正常命中资源
• 统一改用相对路径引入编译完成的CSS文件，如./dist/css/main.css，同时核对Live Sass Compiler输出的CSS存放目录，与HTML中引用的路径完全对齐，避免出现大小写不匹配、目录层级错位的问题
• 检查是否存在硬编码的本地服务地址引入，如写死http://localhost:5500/css/main.css这类地址的引入代码，这类地址在file协议、其他端口启动的服务环境下完全无法访问

浏览器协议安全策略排查 #

• 确认file协议下的资源加载拦截情况：部分浏览器对file协议上下文的资源访问存在严格限制，如果CSS文件内部引用了带http/https协议的跨域字体、图片资源，会被安全策略直接拦截，进而导致整段样式表解析失效；而live-server启动的localhost环境属于浏览器默认信任的安全上下文，不会触发这类拦截规则
• 替换所有硬编码的跨域资源引用为本地下载的资源路径，避免不同环境下的安全策略差异导致的样式加载失败

Sass编译配置核查 #

• 检查Live Sass Compiler的配置参数，确认输出CSS时没有生成写死的绝对磁盘路径、或者关联了热更新监听的localhost地址代码：这类开发模式下自动追加的内容，在脱离live-server运行环境时会造成CSS语法解析错误，整段样式无法被浏览器识别
• 确认sourceMap文件的引用路径，避免因sourceMap路径错误连带触发浏览器对CSS文件的加载校验异常

资源加载逻辑排查 #

• 核对CSS文件的引入顺序：如果依赖的第三方样式（如Leaflet自带样式）在自定义CSS之前引入，当第三方样式资源在非安全上下文下加载超时时，可能会阻塞后续自定义样式的正常加载
• 清理不同浏览器的本地缓存：部分浏览器会缓存旧的、路径错误的CSS请求结果，即使修正了引用路径，也可能因缓存命中旧的无效资源导致样式缺失

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