Angular add custom .css files to Angular-CLI project

Question

I'm adding existing .js and .css files to an Angular 4 app which uses angular-cli 1.0.6. Until a recent upgrade, I was simply referencing them in index.html--I know that's 'wrong' but it worked for my current needs.

After a recent update, I'm getting 404s for everything I've tried. I have managed to add the JavaScript file by adding it to angular-cli.json and then importing it into a component. That's working, but the same isn't working for the .css file.

I've tried it in index.html: <link rel="stylesheet" type="text/css" href="/scripts/test.css"> I've tried in the component's template: <link rel="stylesheet" type="text/css" href="../../../app/scripts/test.css"> And I've tried adding it the to styles in the component: styleUrls: ['../edit.scss', '../../scripts/test.css'],

I'm getting 404s for all of them even though the paths are valid (I can follow them in the editor).

What's the correct way to do this?

Answer 1

An angular-cli project contains by default a styles.css file under the src folder of the project (myAngularCliProjectName/src/styles.css).
In this file you'll be able to add global styles and also import other style files.
There's no need at all to link them from the index.html file.