如需调试功能,请在编译输出的时候输出debug信息,那样解析的css文件中就会包含debug信息,然后通过firebug或谷歌的调试工具就可以定位到我们编辑的scss文件,而不是解析后的css文件。
如果光做好SASS的准备工作还不够,还需要让浏览器支持SASS。那么就需要一个浏览器的插件才能让浏览器识别SASS,从而方便开发人员进行开发。
如需调试功能,请在编译输出的时候输出debug信息,那样解析的css文件中就会包含debug信息,然后通过firebug或谷歌的调试工具就可以定位到我们编辑的scss文件,而不是解析后的css文件。(如图1-1)
图1-1
如果你的css文件中没有以@media -sass-debug-info开头的代码,说明没有输出debug信息。请重新使用koala工具编译你的scss文件,并确定已经勾选了debug信息这个选项。
在火狐中调试,只需要再下载FireSass→即可。
二、编译工具koala的安装
1、进入页面
2、根据系统下载所需要的koala的版本
3、然后在下载文件夹中安装下载的EXE文件,即可安装成功
三、编译工具koala的优点
1、多语言支持:支持Less、Sass、CoffeeScript 和 Compass Framework。
2、实时编译:监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作。
3、编译选项:既可统一设置文件的编译选项,也可单独设置某个文件的编译选项。
4、强大的文件右键功能:右键文件元素,即可操作打开文件,打开文件目录,打开输出文件目录,设置输出文件目录,编译,删除六大常用功能。
5、错误提示:在编译时如果遇到语法的错误,koala将在右下角弹出错误信息,方便开发者定位代码错误位置。
6、跨平台:windows、linux、mac都能完美运行。
7、免费且负责:koala完全免费,而且作者很负责,有什么问题作者都会及时给予答复,意见什么的可以直接提交给作者,一般在下一个版本就能得到解决。
打包一个文件,只需要常规的在入口的js文件引用 css文件即可, 打包成多个CSS文件,可以设置多个CSS入口,让webpack用 loader去打包。 和分割单独打包js文件一样。下面有两个例子。【例子来源】 // 使用webpack 打包单独的postcss语法的css文件我最近也在学sass,之前用的是sublime test2,这个编译器有个好处就是转译成css的时候方便,但是终究还是和项目分离,也很麻烦。后来发现只要通过命令行一直监视整个目录或者文件就方便多了,只要保存,sass就会自动编译,下面是例子:监视文件:
sass --watch test.scss:test.css
监视目录
sass --watch sass(sass目录):css(css目录)
满意的话希望采纳啦。。。。