Как импортировать CSS в компоненты в угловых 4

Question

Я хочу добавить CSS в компонент [Angular 4].Я пытаюсь добавить это в " resume.component.ts " с помощью styleUrls , но не могу получить доступ к URL-адресу активов !!!

Пожалуйста, помогите мне добавить css это в компонент.Спасибо всем: D

Answer 1

Существует множество способов импорта файла CSS в приложение Angular.

1. Angular следует за структурой компонента (angular cli), которая предоставит вам CSS/HTML/TS/Spec.ts файл на компонент. Таким образом, вы можете просто добавить файл CSS для этого конкретного компонента в @component styleUrls свойство (, которое принимает массив имен файлов ), просто добавив имя файла, не нужно добавлять полное путь туда.

2. Если вы хотите добавить глобальный CSS в свое приложение, вы можете добавить его в файл .angular-cli.json (так как вы используете angular v4).

3. Иначе, если вы хотите импортировать файлы CSS в другой CSS, вы можете просто использовать синтаксис импорта, например, используя полный путь

   @import '/assets/css/yourstyle.css';
   

Answer 2

Вы можете добавить относительную ссылку вашего файла CSS в файл .angular-cli.json (или angular.json для v6) здесь:

"styles": [
  // relative link
]

Answer 3

Вы вводите неправильный путь. asset => assets

@import '/asset/css/main_style.css';

пожалуйста, измените на

@import '/assets/css/main_style.css';

Answer 4

Вы должны поместить свои файлы и использовать относительный путь из папки assets.

Например, в приведенном выше примере вы поместили файл css в src / assets / css / general_style.css, затем

<link rel="stylesheet" href="assets/css/general_style.css">