javascript - 需求较少的常见 mixins

Question

我正在尝试获取Guy Bedfords less plugin for RequireJS将一些常见文件拉入每个/所有后续的 less 文件中。目标是将特定于模块的 less 文件分开，但每个文件都引入一些常见的 Assets ，例如变量和 mixin。

不过到目前为止，插件似乎会自行解析每个 less 文件。

例如，如果我简单地说:

// variables.less

@red: #ff0000;


// styles.less

body {
    background-color:@red;
}


// main.js

define(['less!variables', 'less!styles'], function() {
    ...
});

variables.less 和 styles.less 都已解析，但 styles.less 在 Variables.less 中看不到 @red，并且我收到一个 javascript 错误，指出 styles.less 无法解析。

查看 git 上的示例，看起来像是分离依赖项(强制它们首先加载？)应该将它们拉入:

// common.js

define(['less!variables'], function() {
    return {}; 
});


// main.js

define(['common', 'less!styles'], function() {
    ...
});

但这给了我相同的结果；出现 less 错误，表示 styles.less 未正确解析。

我尝试了一些“hacks”，例如在 styles.less 中使用 @import 来引入变量。less，但似乎虽然 require-less 会规范化大多数 url，但它不会规范化 @imports，所以现在Variables.less 必须绝对引用，这并不是我想要的。

有人知道我在这里做错了什么吗？

目标是在开发中通过 RequireJS 加载和解析 less 文件，使用与 r.js 良好集成的东西将所有 less 文件预编译为 css 进行部署。虽然 require-less 插件看起来很棒，但无法使用变量或 mixin 是一个非常严重的错误。还有其他选择可以做到这一点吗？

谢谢。

Answer 1

看起来加载常见较少资源的方法是使用@import。它变成了一个非常快速的修复方法，可以让 url 规范化正常工作 ( https://github.com/guybedford/require-css/pull/26 )。