评论

你想在小程序里使用less嘛? (VScode版)

最近要用原生重构一个项目,用惯了预处理的我实在受不了用原生CSS写样式这种令人崩溃的开发体验。作为一个坚定的开放思维实践者,我决定做点什么。

老规矩,直奔主题,三步走:

Step 1:
Ctrl+Shift+X 打开扩展 - 搜索 easy Less 并安装

Step 2:
Ctrl+ 逗号 打开设置 - 搜索 easy Less config 并选择 点在setings.json中编辑 把下面配置粘贴进去(注意配置项间隔的逗号不要漏了)

"less.compile": {
        // "compress":  true,  // 是否删除多余空白字符
        // "sourceMap": true,  // 是否创建文件目录树,true的话会自动生成一个 .css.map 文件
        "outExt": ".wxss" // 输出文件的后缀,默认为.css
}

Step 3:
在你的wxml同级目录下新建一个 文件名.less 书写less语法的css并保存,同级目录下就会自动生成一个 文件名.wxss的文件

好了,这次分享到这里就结束了。如果你觉得对你有帮助,请给我点个赞并留言告诉我,让我为你开心下😊。

最后一次编辑于  2019-04-30  
点赞 23
收藏
评论

13 个评论

  • 铭锋科技
    铭锋科技
    2019-05-02

    好东西,有些人就是不想别人看到。

    2019-05-02
    赞同 2
    回复 6
    • 傅江江
      傅江江
      2020-05-10
      是的,目前可以在开发者工具中(1.03以上)直接使用这个插件了~
      2020-05-10
      回复
    • 傅江江
      傅江江
      2020-05-10
      2020-05-10
      回复
    •  石贤辉
       石贤辉
      2020-05-26回复傅江江
      请问添加后自动生成css文件  不是wxss文件怎么解决
      2020-05-26
      回复
    •  石贤辉
       石贤辉
      2020-05-26回复傅江江
      我知道了  加了一个settings.json 好了
      2020-05-26
      回复
    • 傅江江
      傅江江
      2020-06-04回复 石贤辉
      用法参考vscode
      2020-06-04
      回复
    查看更多(1)
  • 陈式坚
    陈式坚
    2019-04-30

    不开玩笑的说,你觉得同样要安装环境的话


    是安装Gulp/Webpack处理,还是先安装一个VS Code?哪个更正常一点

    2019-04-30
    赞同 1
    回复 14
    • 2019-04-30

      大规模应用肯定是用构建工具,我只是抛砖引玉

      2019-04-30
      回复
    • Sujz
      Sujz
      2019-12-09
      对于已经安装了vs code,或者使用vscode的小伙伴们来说,是很有帮助的.而且,我个人觉得你的语气不太合适.
      2019-12-09
      回复
    • 陈式坚
      陈式坚
      2019-12-10回复Sujz
      我语气是有问题,就是恨自己技术不行,看到这种降维的东西...  举个例子,写h5的时候,大家都是研究造火箭,结果来小程序,看到这个文章居然内容还是教大家如何种土豆,问题方法还是错的
      2019-12-10
      1
      回复
    • Sujz
      Sujz
      2019-12-10
      1. 方法是有用的,对于使用vscode的程序员,也是便捷的.
      生成 .less 文件的同时生成一个 .wxss文件,两者是联通的,修改less文件的同时,插件会帮你完成 wxss文件的代码.
      2. 这不是一个正常的使用 less 的过程吗?
      我不认为这个就是 降维 了,打包构建工具也是逐渐往 便捷化 发展(vue cli3的图形化)
      2019-12-10
      2
      回复
    • 陈式坚
      陈式坚
      2019-12-10回复Sujz
      刚好有空,可以跟你说说 
      1. 有用但很傻,有很多方面原因。如果只是测试,那无所谓,在编辑器里用插件处理也是最快的办法。但是投入到生产环境里,那是真的傻了。
      举个例子你需要经常移动办公,但是家里PC电脑没办法随身携带,你会选择买一台笔记本,还是带个发电机 + PC电脑?明白吗,可以做,但是没必要,没人会这么勉强自己
      用任何一个(夸张了)构建工具都可以生成less然后同时生成wxss,还可以做更多事情


      2. 完全不是使用less的过程,这一点我觉得你应该自己也很清楚,不清楚,你随便百度搜索一下... 使用less是安装vs code然后安装插件? 
      关于什么cli的图形化,不做解释。因为我们关注点不同,一个事物可以有很多关注点,只不过你是站在一个其中很小的角度去看。
      就是你说的没错,但是和实际,或者真实角度差距很大
      2019-12-10
      1
      回复
    查看更多(9)
  • 深海鱼子酱
    深海鱼子酱
    2022-09-16

    我按照你的这个操作,重启后咋也不行,求帮助,不能有less太难受了

    2022-09-16
    赞同
    回复 1
    • 2023-02-27
      嗯?
      2023-02-27
      回复
  • 苏牙
    苏牙
    2020-03-23

    酷!

    2020-03-23
    赞同
    回复
  • 4000+
    4000+
    2019-09-11

    感谢

    2019-09-11
    赞同
    回复
  • 小雨
    小雨
    2019-06-04

    原声怎么用scss


    2019-06-04
    赞同
    回复
  • 劲松_楚鸟
    劲松_楚鸟
    2019-05-11

    微信官方的小程序开发工具真的不杂滴,又卡又慢,好吧,我穷鬼买不起好电脑,习惯用vscode

    2019-05-11
    赞同
    回复
  • LL
    LL
    2019-05-08

    我用wepy开发小程序

    2019-05-08
    赞同
    回复 1
    • 2019-05-21

       我之前也用wepy,刚换成原生。

      2019-05-21
      回复
  • 捡瓶瓶的张某人
    捡瓶瓶的张某人
    2019-05-05

    mpvue表示框架虽然不咋地,但是sass、less换着用都行,vuex变着法玩

    2019-05-05
    赞同
    回复 2
    • 2019-05-05

      哈哈

      2019-05-05
      回复
    • blues
      blues
      发表于移动端
      2020-10-19回复
      倒闭了
      2020-10-19
      回复
  • 鲤子
    鲤子
    2019-05-05

    webstorm就一直用less写小程序,顺便写了个脚本创建小程序页面跟组件,开发工具就完完全全拿来预览跟调试了。

    2019-05-05
    赞同
    回复 9
    • Youngwell
      Youngwell
      2019-05-08

      webstorm写小程序代码保存后,在开发工具中代码没有更新,有遇到过这问题吗?

      2019-05-08
      回复
    • 鲤子
      鲤子
      2019-05-08回复Youngwell

      没有

      2019-05-08
      回复
    • Youngwell
      Youngwell
      2019-05-08回复鲤子

      webstorm中用less自动转wxss后,less文件怎么处理呢?要删除掉吗?可以分享下你的创建小程序页面跟组件的脚本吗?谢谢大佬

      2019-05-08
      回复
    • 鲤子
      鲤子
      2019-05-08回复Youngwell

      less不用管,开发工具打包上传的时候会过滤这些非小程序需要的文件,脚本的话就是根据自己的习惯瞎鸡掰写的,可以用node、shell、php、python都可以,无非就是写几个创建文件并填充内容脚本,然后再修改小程序目录里的配置文件,然后通过命令行运行脚本就完事了。

      2019-05-08
      回复
    • Youngwell
      Youngwell
      2019-05-08回复鲤子

      谢谢你的解答

      2019-05-08
      回复
    查看更多(4)

正在加载...

登录 后发表内容