在浏览器页面有时看到sass文件而不是css文件问题，其主要由于sass开启了source-map(调试)功能，问题如下图：

sass调试

sass调试需要开启编译时输出调试信息和浏览器调试功能，两者缺一不可。

开启编译调试信息

目前sass的调试分为两种，一种为开启debug-info，一种为开启sourcemap（这个将成为主流）。

如开启的是debug-info，则解析的css文件中会有以@media -sass-debug-info开头的代码，如没有则表明没有开启。

如开启的是sourcemap，则在解析的css文件同目录下生成一个.css.map的后缀名文件。

命令行开启

两个的命令分别为--debug-info，--sourcemap，开启如下：

1 sass --watch style.scss:style.css --debug-info
2 sass --watch style.scss:style.css --sourcemap

koala开启

有关koala的使用请点击这个http://koala-app.com/index-zh.html

如下图：点击相应的文件，然后就会出现右边的编译选项，即可选择是否开启source map，debug info

开启浏览器调试

谷歌浏览器调试

F12打开调试面板，点击调试面板右上角的齿轮图标打开设置，在general选项中勾选Enable CSS source map 和 Auto-reload generated CSS。

开启--sourcemap编译，f12打开调试面板，就可以看到原先右边的css文件变成了我们现在的scss文件

点击scss文件，会跳到source里面的scss源文件，现在可以在里面进行修改，修改完成后可以右键选择save或save as命令，然后替换我们本地的scss源文件，刷新chrome就可以看到变化（注意，解析样式需要一定时间）。以后只要ctrl+s保存修改就可以在浏览器中看到修改效果了。

火狐浏览器调试

debug-info调试

firefox可以安装插件FireSass使用debug-info来调试。

开启--debug-info编译，f12打开firebug，就可以看到原先右边的css文件变成了我们现在的scss文件

sourcemap调试

firefox 29 将会开始支持sourcemap，注意是火狐自带的调试功能，而不是firebug。

开启--sourcemap编译，右键“查看元素”采用火狐自带的调试功能，打开调试面板，在样式上右键选择“显示原始来源”。

点击scss文件，这样就跳到了scss文件。如下图：

然后就可以进行我们的修改了，修改之后点击保存或者'ctrl+s'弹出我们要保存到哪里，同谷歌一样直接覆盖到我们本地的源文件就ok了。

有时用29 beta版本的时候这个功能不太稳定，估计到稳定版本应该就好了。同时期待FireSass这个插件升级支持sourcemap。

转载于:https://www.cnblogs.com/lhweb15/p/5672902.html

sass调试--页面看到sass文件而不是css文件问题相关推荐

HTML文件引入外部CSS文件时路径的写法总结
HTML文件引入外部CSS文件时路径的写法总结一. 引入外部css文件的基本样式二 . 路径的基本规则三 . 常见情况路径写法示例 1. index.html和style.css文件在同一文件夹 ...
html中怎样导入css文件路径,前端——css文件引入的路径问题
上一篇我们说到引入css文件的三种方式,而其中的外部样式,也就是外部引用样式需要用到link标签来写.关于link的属性我们在这详细说明. 一.引入标签及其样式关于link的属性最主要的就是&quo ...
在style标签中，vue项目引入style文件，外部css文件
在style标签中,vue项目引入style文件,外部css文件一.css是什么? 二.使用步骤 1.使用style标签引入 2.在style标签内使用@import导入总结一.css是什么? ...
html怎么建立css文件,怎么创建css文件
如何新建css文件文件→新建→css文件,建好之后,在html文档中将其引入: 希望对你有帮助,望喜欢. css怎么建立外部样式表? 建立外部样式表很简单,就在html的head里写至于你上边说的一 ...
将scss文件转换成css文件
大家平时做项目肯定都习惯了使用scss或者less去写样式,如果是使用工程化的项目我们可以借助插件很方便的将scss或者less转换成css.那如果我们没有使用工程化,比如简单的demo或者官网等项目 ...
Eclipse中写jsp文件时，发现里面加载不了js文件和css文件（解决css文件在eclipse中显示不了）
今天在做项目的时候,在项目中新建jsp文件和js文件和css文件,启动服务器,访问页面,加载不到js文件和css文件:(文件存在) jsp文件部分代码如下: <link rel="st ...
sideeffects没配置css也还在,webpack4踩坑配置之sideEffects, 打包文件中没有css文件
最开始先来讲一下sideEffects sideEffects sideEffects意为副作用,无副作用类似纯函数的概念(接受参数并返回值,不产生其他影响) 这里的副作用针对模块,如果一个模块单纯的 ...
怎么在html文件中写css文件,html头文件中css怎么写？
html头文件中写css的方法:1.将css的样式代码写在html文档头文件<head></head>中的<style></style>标签中:2.在网 ...
python解析css文件_Python格式化css文件的方法
本文实例讲述了Python格式化css文件的方法.分享给大家供大家参考.具体实现方法如下: import string, sys import re, StringIO TAB=4 def forma ...

sass调试--页面看到sass文件而不是css文件问题