How to import node_modules styles into an Angular 10 library?

Asked

Viewed 72 times

2

I am developing an Angular 10 library. This library uses Swiper JS as a dependency. My library should import css styles from Swiper.

I import Swiper styles from node_modules using the @import scss. This works well using the command ng test.

But when I make one ng build and import my local library into my application, I get an error in the javascript console. Bug says Swiper styles not found in node_modules.

How should I import css styles from a library from within node_modules into an Angular library 10?

css angular library style library

1 answer

0

Inside the archive .angular-cli.json in the project root it is possible to import the css files just by mapping each one of them in the Styles property, example of the primeng library css:

{
    ...
    "apps": [
        {
            ...,
            "styles": [
                "../node_modules/primeng/resources/primeng.min.css",
                "styles.scss"
            ],
            ...
        }
    ],
    ...
}

After that, just run the command ng build or ng serves again for the css to be compiled together with the source code

  • Is that in the library or in the app? There is no . angular-cli.json file in either. Remember that both are Angular 10 projects. You’re referring to the angular.json?

Browser other questions tagged css angular library style library

You are not signed in. Login or sign up in order to post.