001.微信小程序-開發者工具添加less插件

借鑒大神帖子

https://segmentfault.com/a/1190000024556362

 

vscode中路徑

 

放到此路徑下

C:\Users\James Murray\AppData\Local\微信開發者工具\User Data\094c053293b042fe1312a083baf68c8c\Default\Editor\User\extensions\mrcrowl.easy-less-1.6.3

 

修改配置文件

C:\Users\James Murray\AppData\Local\微信開發者工具\User Data\094c053293b042fe1312a083baf68c8c\Default\Editor\User\settings.json

添加

,
    "less.compile": {
    "outExt": ".wxss"
    }

{
    "editor.fontFamily": "Consolas",
    "editor.fontSize": 12,
    "editor.lineHeight": 24,
    "files.autoSave": "off",
    "editor.wordWrap": "on",
    "editor.minimap.enabled": false,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "workbench.editor.enablePreview": true,
    "workbench.editor.enablePreviewFromQuickOpen": true,
    "less.compile": {
    "outExt": ".wxss"
    }
}

 

開啟擴展插件

 

 

 測試

創建.less文件

// 
@color:yellow;
text{
  color:@color;
}
view{
  .viel{
    text{
      color:red;
    }
  }

}

// 導入
@import "../../styles/reset.less";
view{
  color: @themeColor;
}

 

生成 .wxss文件