微信小程序 使用less文件

原⽣⼩程序不⽀持 less ，其他基於⼩程序的框架⼤體都⽀持，

如 wepy ， mpvue ， taro 等。 但是僅僅因為⼀個less功能，⽽去引⼊⼀個框架，肯定是不可取的。因此可以⽤以下⽅式來實現：

 

也可以看這個：https://www.jb51.net/article/207499.htm

 

我們在VsCode 安裝 easy less 插件，然后 在vs code的設置中加⼊如下，配置：

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

 

 

 打開這個文件：

C:\Users\Bi-Hu\.vscode\extensions\mrcrowl.easy-less-1.7.3

 

  直接安裝 然后直接用即可

 

 

 

 

 

 

 

 然后就是

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

這個代碼復制到

 

 

 

 

 

 

 

 

 

 

 

 

 然后重啟

下面我們寫個頁面：

<text>我是text</text>

<view>我是view</view>

<input type="text" value="我是input" />

<view>
        <text>我是view中的text</text>
</view>

/*定義less變量*/
@Color:red;
@fontSIze:30px;
@Border: 1px  solid #6f60aa;
@color_view_text:green;


text{
  font-size: @fontSIze;
}


view{
    /*使用變量*/
    color: @Color;
}

/*less語法 相當於view下面的text標簽*/
view{
      text{
            color: @color_view_text;
      }
}

 

 

Less 語法可以百度  他自帶導入的  @import  ，但只支持相對路徑