less - 使用 LESS 导入文件不会看到 @filename 变量

Question

我正在尝试将.less文件加载到我的主题中，这是我的文件结构：

main.less
themes/pink.less
themes/yellow.less
themes/blue.less

我正在使用它mixin来检索选定的主题：

.theme(@filename){
    @import 'themes/@{filename}.less';
}

.theme('pink');

它不起作用，我收到此错误：

SyntaxError: variable @filename is undefined
.theme('pink');

我习惯于对背景图像做同样的事情而不会出错，我错在哪里？

Answer 1

不幸的是，如果您在 mixin 参数/属性中定义变量，Less.js 会抛出您使用文件导入描述的错误.less（它适用于.css文件导入），但如果您直接在内部定义变量（本地）或在 mixin 之外（全局）。例如，这应该有效：

@filename: 'pink';

.theme(){
    @import 'themes/@{filename}.less';
}

.theme();

这是一个讨论的链接，其中实施该计划的讨论已经在前一段时间进行了，看来长期目标是让您的版本也能正常工作，只是还没有完全实现^_^

但是，如果你只是想根据变量加载一个主题，你可以不使用mixin。只需这样做：

@theme: 'pink';
@import 'themes/@{theme}.less';