Ionic - How to Import scss or css file from node_modules?

Question

I want to import this css or scss file in my component:

node_modules/plyr/dist/plyr.css
node_modules/plyr/src/sass/plyr.scss

Whatever I try does not work.

This is what I have tried already:

    @Component({
    selector: 'videoPlayer',
    template: ``,
    styleUrls: [
       //see below what I have tried to put here.
    ]
})

"../../../node_modules/plyr/dist/plyr.css"

Unhandled Promise rejection: Failed to load ../../../node_modules/plyr/dist/plyr.css ; Zone: ; Task: Promise.then ; Value: Failed to load ../../../node_modules/plyr/dist/plyr.css

"../../../node_modules/plyr/dist/plyr.css"

Unhandled Promise rejection: Failed to load ../../../node_modules/plyr/src/sass/plyr.scss ; Zone: ; Task: Promise.then ; Value: Failed to load ../../../node_modules/plyr/src/sass/plyr.scss

I have tried both of those URLs without ../../../ and it doesn't load or give an error.
I have tried both urls without node_modules, but starting with ~plyr/ instead. Gives the same error as above.
I my component.scss file I have put tried this @import "~plyr/dist/plyr.css";

Refused to apply style from 'http://localhost:8100/build/~plyr/dist/plyr.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

And without the extension gives an error the file is not found or unreachable.
@import "~plyr/src/sass/plyr.scss"; also gives the file is not found or unreachable error.
Without the extension also gives that same error.

How can I fix this.

I don't think I will be able to use answers like:

Copy it and place it in your assets folder.
Define it in your index.HTML with a link tag.
Anything that imports it globally, I only want it in a specific component.

Sébastien Sébastien · Accepted Answer · 2018-04-21T23:46:02

Don't use the styleUrls property from your component's decorator, import the scss from your component's scss file:

your-component {
    @import '../../../node_modules/plyr/src/sass/plyr';
}

It will be compiled into CSS and will be prefixed like any scss you would have manually added in your component's scss file.

Ionic - How to Import scss or css file from node_modules?

1 Answers