0

I am creating an angular component and in the assets folder i have pasted all the js and extra css files. But when i am trying to import the css file in a particular component it shows error that no such file or directory found where as when i click ctrl+click it goes to the right path but during compilation it shows this error.

I tried including absoulte path but still issue not resolved

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

@import '/src/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css';
Bill P
  • 3,622
  • 10
  • 20
  • 32
sunny kumar
  • 75
  • 8
  • See this- https://stackoverflow.com/questions/38796541/how-to-add-font-awesome-to-angular-2-cli-project. Always search for existing question and answers before asking questions. – Satnam112 Jun 21 '19 at 08:41
  • If you have added it to your assets, you don't have to import it anywhere. –  Jun 21 '19 at 08:41
  • @Maryannah but how would i use that particular css in a particular component . – sunny kumar Jun 21 '19 at 08:43
  • @Satnam112 i tried adding css links in json file but css was not working, i had to import it in style.css only then some bootstrap css was working. – sunny kumar Jun 21 '19 at 08:46
  • Well, you first have to install font-awesome using npm install font-awesome --save. Add it in styles array in angular.json. Then you need to restart the server using ng serve as wacther only watch for the file changes in src folder and angular.json is not watched for changes. Hope it helps you now. – Satnam112 Jun 21 '19 at 08:49
  • i have all the css folders in my assets folder. cant i use them directly in import. in any component? – sunny kumar Jun 21 '19 at 08:53
  • this is the error which comes : ``` Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: Failed to find 'src/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css' in [ D:\ang-crud\src\app\login ] at resolveModule.catch.catch (D:\ang-crud\node_modules\postcss-import\lib\resolve-id.js:35:13) ``` – sunny kumar Jun 21 '19 at 08:55
  • @sunnykumar you simply use the classes or whatever you want to use. By adding it to your assets, you declare this file to be a globally registered file. This means all of your classes will be available throughout your entire app, juste like `styles.scss` at the root of your project. –  Jun 21 '19 at 09:00

1 Answers1

0

When adding a file as an asset, it makes it available througout your entire application.

This is, for instance, what happens with your style.scss file.

If you have added it to your assets, then simply consider its entiretity to be available in all of your components.

This means you can now use all classes of font awesome, in any component template, without worrying about importing it.