How to add external CSS files - styleUrls - Angular 5 component

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

Is the css file available at build time? Or just at runtime, once the application is embedded — David
– David, Commented Apr 13, 2018 at 15:30
That's the same principle, you can either add in in styleUrls array in the component, or in .angular-cli styles setting if you are using it. You just need to provide the correct relative path — David
– David, Commented Apr 13, 2018 at 16:42

SrAxi · Accepted Answer · 2018-04-13 14:48:00Z

5

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`

answered Apr 13, 2018 at 14:48

SrAxi

20.1k11 gold badges50 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SrAxi Over a year ago

"What I'm trying to do is include a CSS file, from this parent application, into a component of the Angular 5 application", means that you want to include an external CSS file into an Angular component. Therefore if you include the CSS file to the component's SCSS file... Isn't that what you want? Maybe I'm missing something...

Malcor · Accepted Answer · 2018-04-13 15:29:49Z

3

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.

edited Apr 13, 2018 at 15:29

answered Apr 13, 2018 at 14:51

Malcor

2,73124 silver badges29 bronze badges

6 Comments

L Y E S - C H I O U K H Over a year ago

I have this error when using this : Module not found: Error: Can't resolve '...path to my css...' in '... path to my angular 5 app...'

Malcor Over a year ago

you've set your path wrong. The path is relative to the location of the .angular-cli.json file.

Malcor Over a year ago

And whats the path you have in your styles array?

Malcor Over a year ago

and the absolute path for the css file you're trying to add?

Malcor Over a year ago

Updated my answer.

|

Gabax · Accepted Answer · 2018-04-13 14:50:52Z

2

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";

answered Apr 13, 2018 at 14:50

Gabax

1242 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to add external CSS files - styleUrls - Angular 5 component

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related