将less文件转换成css文件

两种方式,分别为:1、手动生成;2、使用webstorm自动生成。

手动生成

1、项目的文件结构

将less文件转换成css文件_第1张图片

2、在less文件的根目录

Shift + 鼠标右键 + 选择‘在此处打开命令窗口’

将less文件转换成css文件_第2张图片

3、输入命令:lessc + 空格 + less文件名

如:lessc main.less

将less文件转换成css文件_第3张图片

4、继续输入命令:lessc + 空格 + less文件名 + 空格 + 大于号 + 空格 + css文件名

如:lessc main.less > main.css


将less文件转换成css文件_第4张图片

webstorm自动生成

1、File + Settings

将less文件转换成css文件_第5张图片

2、Tools + File Watchers

将less文件转换成css文件_第6张图片

3、点击‘确定’即可

将less文件转换成css文件_第7张图片

4、当你修改less文件时,css文件将自动生成。

你可能感兴趣的:(将less文件转换成css文件)