Custom Angular library not applying css styles when importing into another project

Question

I've made an Angular library that I'm importing into an outside project. The styles I created in the original project however are not showing up when I use the library in the outside project.

Here's the layout of my project:

-> my-lib
   -> src
      -> lib
         -> components
         -> models
         -> services
         -> styles
             -> my_styles.css

In my angular.json file for this project, I've included the .css file in the styles section like:

"styles": [
   "src/lib/styles/my_styles.css"
]

After I package the project into a custom library, I import it into the outside project:

"my-lib": "file:my-lib-1.0.0.tgz"

In the outside project's angular.json within the main project I include the style sheet in the 'styles' section similar to how I did the original project:

"styles": [
   "node_modules/my-lib/styles/my_styles.css"
]

When I run this project however, the styles aren't being applied. What exactly am I doing wrong?

If you check my-lib folder in node_modules in outside project, do you have the styles folder there ? — Roman Šimík
– Roman Šimík, Commented Mar 23, 2020 at 22:50

mohamedhemeda · Accepted Answer · 2020-03-24 00:11:50Z

1

simply you can add your file my_styles.css in assests folder and call it in style.css like this

@import url('./assets/my_styles.css');

answered Mar 24, 2020 at 0:11

mohamedhemeda

1191 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

Custom Angular library not applying css styles when importing into another project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related