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"
    ]
}

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

<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";

无错误 - 按预期工作

为什么不少量导入查找我的文件？
使用css文件的完整路径时工作正常，但我读到你应该避免使用完整路径，对吗？那是为什么？
也许我应该在我的aurelia.json配置中包含.less？
如果我使用完整的node_modules路径并发布我的项目，我在加载库时会遇到任何问题吗？

Answer 1

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

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

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

实际上，node_modules/font-awesome/css/font-awesome.css与您当前的位置相关，完整路径示例为/var/www/project/node_modules/..，这很糟糕，因为当您将项目移动到其他位置时，此路径可能是错误的。
不需要。
没问题，少了会在此文件中复制font-awesome.css内容（这就是 import 的内容）。

希望它有所帮助。

Aurelia CLI - 从node_modules导入较少的文件以掌握较少的文件

1 个答案: