如何添加Source-Map选项

技术文档网 2021-04-26

Source Maps可以让页面样式调试变得非常简单，将显示css规则对应的Sass／LESS代码位置，目前Chrome与Firefox均支持。
LESS 1.5.0开始支持source map功能，可以在Koala中直接勾选该选项；Sass则要安装预览版3.3.0-rc。
所以本文主要介绍如何在Koala中使用Sass的source map功能。
What are Source Maps?

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

默认下，Koala没有直接提供该选项，但是你可以在项目配置文件中增加它。
(项目配置功能介绍)

  1. 在本地系统中安装好ruby及Sass 3.3.0-rc.
    Sass安装: gem install sass --pre

  2. 设置Koala使用系统组件
    打开设置面板，"Sass" --> "高级设置" --> 勾选使用系统组件。

  3. 创建项目配置文件
    在Koala界面中右键项目，选择"项目配置" --> "新建配置" --> "Sass项目"，将在项目根目录生成"koala.config"文件。

  4. 编辑配置文件
    打开"koala.config"，找到"customOptions"字段，增加"--sourcemap".
    e.g. "customOptions": ["--source-map"]

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

相关文章

  1. 硅谷互联网公司的开发流程

    开发流程包括这么几个阶段: OKR 的设立; 主项目及其子项目的确立; 每个子项目的生命周期; 主项目的生命周期; 收尾、维护、复盘。 第一点，OKR 的设立 所有项目的起始，都应该从 Ro

  2. RESTful-表述性状态转移风格

    REST英文全拼：Representational State Transfer 面向资源编程 资源指的就是一类数据 产品表->就是产品资源 最重要的是如何表示一个资源 地址即

  3. 稳定性思考

    产品功能线 0-1： 当系统从无到有的时候，首要考虑的是研发效率，功能快速迭代，满足快速增长的业务需求 1-10 系统已经搭建起来，此时考虑的是系统的稳定性。 可用性：1.隔离：区分出核心和非核心功能

  4. Supervisor守护队列发邮件

    安装 CentOS： yum -y install supervisor Debien/Ubuntu适用：apt-get install supervisor 配置 修改主配置文件：vim /et

  5. 安装libsodium，让服务器支持chacha20等加密方式

    用chacha20加密方式需要安装libsodium 注意：libsodium从1.0.15开始就废弃了aes-128-ctr yum install wget m2crypto git libsod

随机推荐

  1. 硅谷互联网公司的开发流程

    开发流程包括这么几个阶段: OKR 的设立; 主项目及其子项目的确立; 每个子项目的生命周期; 主项目的生命周期; 收尾、维护、复盘。 第一点，OKR 的设立 所有项目的起始，都应该从 Ro

  2. RESTful-表述性状态转移风格

    REST英文全拼：Representational State Transfer 面向资源编程 资源指的就是一类数据 产品表->就是产品资源 最重要的是如何表示一个资源 地址即

  3. 稳定性思考

    产品功能线 0-1： 当系统从无到有的时候，首要考虑的是研发效率，功能快速迭代，满足快速增长的业务需求 1-10 系统已经搭建起来，此时考虑的是系统的稳定性。 可用性：1.隔离：区分出核心和非核心功能

  4. Supervisor守护队列发邮件

    安装 CentOS： yum -y install supervisor Debien/Ubuntu适用：apt-get install supervisor 配置 修改主配置文件：vim /et

  5. 安装libsodium，让服务器支持chacha20等加密方式

    用chacha20加密方式需要安装libsodium 注意：libsodium从1.0.15开始就废弃了aes-128-ctr yum install wget m2crypto git libsod