Aurelia CLI - Import less file from node_modules to master less file

Question

Install package:

npm install font-awesome --save

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

Import style in html page using require tag:

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

No errors - Working as intended

Import style using less and aurelia.config path (not working)

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

Error: not found - Doesn't find file when using import less in master less file.

Import style using less and full node_modules path (working)

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

No errors - Working as intended

1. Why doesn't import less find my file?

2. It's working fine when using full path to css file, but I read that you should avoid using full paths, correct? Why is that?

3. Perhaps I should include .less instead in my aurelia.json config?

4. If I use the full node_modules path and publish my projects, will I have any problems loading the library?

Answer 1

When you updated the aurelia.json file, you are basically saying "name": "font-awesome" is in "path": "../node_modules/font-awesome", so <require from="font-awesome/css/font-awesome.css"></require> works because Aurelia knows where font-awesome is placed (like an alias).

But, with @import (less) "font-awesome/css/font-awesome.css"; , you cant find the file because less doesn't know the alias.

@import (less) "node_modules/font-awesome/css/font-awesome.css"; works because this is the real path where font-awesome is placed.

2. Actually, node_modules/font-awesome/css/font-awesome.css is relative to your current place, full path example is /var/www/project/node_modules/.., and this is bad because when you move your project to another place, this path could be wrong.

3. No need.

4. No problem with that, less will copy font-awesome.css contents inside this file (that's what import does).

Hope it helps.