在project.config.json文件中，setting 下的 useCompilerPlugins 字段中添加 "less" / "sass"，（比如要同时使用 typescript 和 less 即配置 ["typescript" , "less"] ），即可开启小程序编译器中的 Less / Sass 功能。

注意二者不可同时出现 "less" , "sass" 即 ["less" , "sass" ] 这种情况下会报错

修改现有文件

将现有文件的 ttss 后缀改成 less / scss ，以获得更好的体验。不过启用 Less / Sass 编译后，后缀为 ttss 文件也是支持的，但如果存在同名的 xxx.less / xxx.scss 和 xxx.ttss 文件，则优先使用 xxx.less / xxx.scss 文件。

功能说明

Less 使用全局变量

Less 可以直接引用 app.less 中声明的变量和方法，编译器会默认为所有的非 app.less 文件增加引用

@import (optional, reference) '/app.less';

代码示例：

// app.less
@redcolor: red;

.blue {
  color: blue;
}

// 其他的 page.less
.red {
  color: @redcolor; // 直接使用 app.less 中定义的变量
}

Sass 使用全局变量

Sass 可以直接引用全局变量和方法，和 Less 不同，我们需要新增一个 global.scss 文件放置在 app.scss 同级，将公共的变量和方法写在 global.scss 中，编译器会默认为所有的非 global.scss 文件增加引用。


@use '/global.scss';

代码示例：

// global.scss
$red: red;

// 其他的 page.scss
.red {
  color: global.$red; // 使用 global.scss 中的变量
}