Correct way to call angular CSS path

Question

I´m new in Angular 5 and I want to get styles installed into node_modules folder who is outside src folder, so in .angular-cli.json I do something like this:

 "styles": [
        "..node_modules/bootstrap/dist/css/bootstrap.min.css",
        "..node_modules/font-awesome/css/font-awesome.css",
        "styles.css"
      ],

But I get:

ERROR in multi ./src/..node_modules/bootstrap/dist/css/bootstrap.min.css ./src/..node_modules/font-awesome/css/font-awesome.css ./src/styles.css Module not found: Error: Can't resolve 'C:\Users\User\Documents\Visual Studio 2017\Projects\Tag\Project\Project.WebUI\src..node_modules\bootstrap\dist\css\bootstrap.min.css' in 'C:\Users\User\Documents\Visual Studio 2017\Projects\Tag\Project\Project.WebUI'

It is something confusing like complier don´t detect .. and it don´t go to proyect route that´s why it return src..node_modules\

Can someone says what is the correct way to route that specific folder? Regards

Photo of structure:

joh04667 joh04667 · Accepted Answer · 2018-03-26T21:24:59

You're close, and you're correct that the file paths are relative to the app folder, but you still need a slash preceding the folder name.

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "styles.css"
      ],

:)

EDIT: Just a note: changing the angular-cli.json will require you to kill and re-run ng serve before those changes will be recognized.

Correct way to call angular CSS path

1 Answers