如何添加外部CSS文件 - styleUrls - Angular 5组件

Question

I have an Angular 5 application in a subdirectory of another parent application.

The parent application is a set of JSP, and other angularJs applications... etc.

What I'm trying to do is include a CSS file, from this parent application, into a component of the Angular 5 application.

 @Component({ selector: 'app-my-form', templateUrl: './my-form.component.html', styleUrls: [....] //Here }) 

Is it possible ?

I looked at this question : Load external css style into Angular 2 Component already asked, but it does not correspond to my case.

Thanks for your help

Answer 1

Try the following:

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['my-form.css']
})

Your file will be a SCSS file: myform.scss .

And then you can import an external css file like this:

@import "my-external-stylesheet.css"; // this on the top of `my-form.scss`

Answer 2

In the .angular-cli.json file of your child application look for the styles property of your app. Add the path to your parent CSS in there.

Here is an example of the JSON config.

 "apps": [
    {
      "styles": [
        "../../../../apec-template-bootstrap-responsive/src/main/resources/css/old-apec.css",
        "styles.css"
      ],
    }
  ],

This should give your child application any style you require from the parent.

Answer 3

your styleUrls can be the default one:

styleUrls: './my-form.component.css'

while in your my-form.component.css you can import the CSS files you want:

@import ".../component.css";