教你如何在pycharm中使用less

作者:li_huizhen 时间:2021-08-12 13:59:32 

前端css中用到less,在pycharm中安装配置less操作步骤如下:

1.点开setting,在Plugins中搜索node.js(安装less之前得安装node.js),安装成功后关闭重新打开pycharm。

教你如何在pycharm中使用less

2.点开pycharm左下角的Terminal,输入 npm install -g less ,安装less:

教你如何在pycharm中使用less

3、检查是否安装成功,执行命令”lessc -v”查看版本:
(正常执行命令之后应该会看到less版本号信息,但是我的pycharm不知道为什么报如下截图错误,但是不影响后续正常使用)

教你如何在pycharm中使用less

4、在pycharm中新增less:

教你如何在pycharm中使用less
教你如何在pycharm中使用less

5、测试在pycharm中创建less文件并使用:

教你如何在pycharm中使用less
教你如何在pycharm中使用less

点击【ok】之后生成如下结构文件:

教你如何在pycharm中使用less

在demo.less中编写如下代码:

教你如何在pycharm中使用less

ctrl+s 保存之后,可以看到demo.css文件中自动生成了如下代码(自动将less文件转化为了css文件):

教你如何在pycharm中使用less

在html文件中引用编译后的.css文件

教你如何在pycharm中使用less

保存html文件,在浏览器中打开可看到body背景颜色已变成粉色:

教你如何在pycharm中使用less

来源:https://blog.csdn.net/li_huizhen/article/details/120973751

标签:pycharm,less
0
投稿

猜你喜欢

  • 全面解读Python Web开发框架Django

    2022-06-24 19:41:45
  • Ubuntu安装Jupyter Notebook教程

    2021-03-12 03:14:58
  • Python实现删除重复文件的示例代码

    2022-02-26 03:50:22
  • 再谈Python中的字符串与字符编码(推荐)

    2023-06-15 23:25:08
  • QQ登录Banner之清明概念

    2009-04-15 11:41:00
  • Python面试题之统计哈希列表中最多元素

    2023-06-26 20:24:49
  • 详解Python3的TFTP文件传输

    2023-06-01 22:29:17
  • 某大型网络公司应聘时的笔试题目附答案

    2023-11-15 02:01:21
  • Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度

    2023-09-18 23:32:01
  • Django 创建新App及其常用命令的实现方法

    2023-05-20 09:04:47
  • AspJpeg组件:介绍、注册、高级使用方法

    2010-01-25 12:42:00
  • Python入门教程之Python的安装下载配置

    2021-08-18 06:01:14
  • python计算二维矩形IOU实例

    2022-03-07 23:40:18
  • Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)

    2023-03-28 04:05:22
  • 数字人组件反写[asp组件开发实例2]

    2009-06-09 13:15:00
  • 基于ASPJPEG 制作了一个梦寐已久的批量水印工具步骤

    2011-02-28 10:39:00
  • python创建关联数组(字典)的方法

    2021-11-22 06:51:18
  • Python 使用SFTP和FTP实现对服务器的文件下载功能

    2023-10-29 09:39:40
  • 使用一条INSERT语句完成多表插入

    2010-03-18 11:08:00
  • php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案

    2023-09-27 17:22:32
  • asp之家 网络编程 m.aspxhome.com