WebStrom自动编译less并生成.map

最新推荐文章于 2024-08-13 10:10:41 发布

lidix

最新推荐文章于 2024-08-13 10:10:41 发布

阅读量765

点赞数

CC 4.0 BY-SA版权

文章标签： IT

本文链接：https://blog.youkuaiyun.com/m0_37613019/article/details/83312487

本文介绍如何在Windows 10系统中使用WebStorm 2018.2.1配置Less文件自动编译成CSS，并确保源映射文件正确生成在同级目录下，便于调试追踪样式来源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系统：win10
版本：WebStrom 2018.2.1
https://blog.youkuaiyun.com/wwz123124/article/details/80274004
上述配置包含sourcemap文件的输出，***.map的作用是调试时可以确定样式在less文件中的位置，而不是在css（默认）中的位置。但是这种方法编译后的文件是在less文件下的。

参考视频：
https://www.youtube.com/watch?v=YwBWByAR8ug

一、终极解决方案：
实现在同等级文件目录下输出CSS和map文件
依次打开：
File > settings > Tools >File Watchers > 点击“+” 新建less文件
Pragram:
C:\Users\lidi\AppData\Roaming\npm\lessc.cmd (全局安装在这个目录下，也可以用搜索的方式寻找)
Arguments:
$ProjectFileDir$\less\$FileDirPathFromParent(less)$$FileName$ (空格)$ProjectFileDir$\css\$FileDirPathFromParent(less)$$FileNameWithoutExtension$.css --source-map --no-color
1、$ProjectFileDir$——项目文件的目录
2、\less\——less文件夹
3、$FileDirPathFromParent(less)$——以less为母目录（个人意见）
4、$FileName$——文件的名称
5、 --source-map——为了生成**.map的文件
6、--no-color——配与不配没有明显的效果

二、lessc.cmd的理解
lessc.cmd 1.less 1.css
它的使用方式时前面是要编译的文件，后面是编译生成的文件，可带路径。Pragram提供的是lessc.cmd执行的路径。
PS:
1、只有保存了才会生成.css文件。