当前位置:首页>Koala教程>如何添加Source Map选项

如何添加Source Map选项

作者:微学网发布时间:2019-09-03 23:01:19

Source Maps 介绍

Source Maps可以让页面样式调试变得非常简单,将显示CSS规则对应的SassLess代码位置,目前Chrome与Firefox均支持。

LESS 1.5.0开始支持source map功能,可以在Koala中直接勾选该选项;Sass则要安装预览版3.3.0-rc。
所以本文主要介绍如何在Koala中使用Sass的source map功能。

什么是 Source Maps?

请点击了解:
What are Source Maps?

如何在Koala中使用Sass的source map功能

默认下,Koala没有直接提供该选项,但是你可以在项目配置文件中增加它。
项目配置功能介绍:https://www.weixue.wang/koala/koala-config.html

  • 在本地系统中安装好ruby及Sass 3.3.0-rc。
    Sass安装

    gem install sass --pre
    
  • 设置Koala使用系统组件
    打开设置面板,”Sass” —> “高级设置” —> 勾选使用系统组件。

  • 创建项目配置文件
    在Koala界面中右键项目,选择”项目配置” —> “新建配置” —> “Sass项目”,将在项目根目录生成”koala.config”文件。

  • 编辑配置文件
    打开”koala.config”,找到”customOptions”字段,增加”—sourcemap”.
    e.g. “customOptions”: [“—source-map”]

好了,现在编译一个SASS文件试试,可以在输出目录中看到编译css的同时也生成了”.map”文件。