zoukankan      html  css  js  c++  java
  • 用webstorm自动编译less产出css和sourcemap

    用webstorm自动编译less产出css和sourcemap:https://www.cnblogs.com/caiyuan9426/p/4663199.html

    在chrome中我们通过sourcemap可以直接调试less源文件文件,这是一个非常强大的功能。
    请看https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CN

    1. 在chrome中开启dev工具,开启容许CSS source maps设置

    chrome的Setting 截图

    2. 配置webstorm Setting(Ctrl+Alt+s)

      webstorm中只要创建了less扩展名的文件,就会有提示只要你同意就会创建一个firewatchers任务,但是这个默认的任务只能编译出css。我们需要对这个任务进行一些小修改,便能达到产出css的同时又可以产出sourcemap。

    对 Arguments 和 Output paths to refresh进行修改就可以
    Arguments:

    $FileName$ $FileParentDir$css$FileNameWithoutExtension$.css --source-map

    意思是在指定的css目录下生成的css和map文件,其中你的配置需要看你的项目的构建如图。

      只要明白less的命令,在Arguments中设置正确的路径就行了,不配置Output paths to refresh也可以达到一样的效果。

    lessc style.less ../css/style.css --source-map

    3. 然后是来时其他文章的摘抄啦

    sass的配置方法也是一样,它生成css和map的命令行参数如下:
    sass bootstrap.scss:../css/bootstrap.css --sourcemap --no-cache

    在Arguments 中的参数如下

    --no-cache --sourcemap $FileName$:$FileParentDir$css$FileNameWithoutExtension$.css

    4. 在html中,加入css文件

    <link rel="stylesheet" href="../themes/css/bootstrap.css">

    其实可以打开css文件看下,最后一行有个

    /# sourceMappingURL=bootstrap.css.map /

    引用的.map文件。。
    之前为了方便调试,把.map和css生成到同一个目录下。
    当打开页面访问的时候,点击样式
    http://blog.csdn.net/ylh644894056/article/details/25924171link

  • 相关阅读:
    Charles 环境安装
    postman的安装指南
    python-web自动化-三种等待方式(元素定位不到一)
    如何查找MySQL中查询慢的SQL语句
    1023 组个最小数
    linux学习笔记01
    P6461 [COCI2006-2007#5] TRIK
    P1181 数列分段Section I
    P4414 [COCI2006-2007#2] ABC
    如何安装oracle
  • 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/11278302.html
Copyright © 2011-2022 走看看