Aurelia CLI - 从 node_modules 导入 less 文件到 master less 文件

Question

安装包：

npm install font-awesome --save

更新 aurelia.json：

{
    "name": "font-awesome",
    "main":"",
    "path": "../node_modules/font-awesome",
    "resources": [
        "css/font-awesome.css",
        "/fonts/fontawesome-webfont.woff2",
        "/fonts/FontAwesome.otf",
        "/fonts/fontawesome-webfont.eot",
        "/fonts/fontawesome-webfont.svg",
        "/fonts/fontawesome-webfont.ttf"
    ]
}

在html页面中使用require标签导入样式：

<require from="font-awesome/css/font-awesome.css"></require>

没有错误 - 按预期工作

使用 less 和 aurelia.config 路径导入样式（不起作用）

@import (less) "font-awesome/css/font-awesome.css";

错误：未找到 - 在 master less 文件中使用 import less 时找不到文件。

使用较少和完整的 node_modules 路径导入样式（工作）

@import (less) "node_modules/font-awesome/css/font-awesome.css";

没有错误 - 按预期工作

1. 为什么 import less 找不到我的文件？

2. 使用 css 文件的完整路径时工作正常，但我读到您应该避免使用完整路径，对吗？这是为什么呢？

3. 也许我应该在我的 aurelia.json 配置中包含 .less？

4. 如果我使用完整的 node_modules 路径并发布我的项目，我在加载库时会遇到任何问题吗？

Answer 1

当您更新 aurelia.json 文件时，您基本上是在说 "name": "font-awesome" 在 "path": "../node_modules/font-awesome" 中，所以 <require from="font-awesome/css/font-awesome.css"></require> 有效，因为 Aurelia 知道 font-awesome 的放置位置（如别名）。

但是，使用 @import (less) "font-awesome/css/font-awesome.css"; 时，您无法找到该文件，因为 less 不知道别名。

@import (less) "node_modules/font-awesome/css/font-awesome.css"; 有效，因为这是放置 font-awesome 的真实路径。

1. 实际上，node_modules/font-awesome/css/font-awesome.css 是相对于您当前位置的，完整路径示例为 /var/www/project/node_modules/..，这很糟糕，因为当您将项目移动到另一个位置时，此路径可能是错误的。

2. 不需要。

3. 没问题，less 会在这个文件中复制font-awesome.css 的内容（这就是 import 所做的）。

希望对你有帮助。