Rollup-plugin-vue: Importing CSS from node_modules

[spentacular]

Expected behavior

I'm having trouble getting CSS imported from node_modules.

Actual behavior

CSS doesn't appear to get pulled in from node_modules when compiling.

Steps to reproduce the behavior

I'm not quite sure if I'm missing something or the best way to do this. Currently, my style tag looks like

<style src="~module/dist/index.css"></style>

I've also tried doing an inline one:

<style>
@import '~module/dist/index.css';
</style>

I've tried several different build options as well but couldn't find anything. Am I just missing something simple?

Thanks!

[spentacular]

Sorry about this one, finally got it figured out. I didn't realize the styles property was something that you could add to the package.json. I also combined it with rollup-plugin-postcss + postcss-imports to get this working, which also made it much cleaner to import:

<style>
@import "module";
</style>

[oskarrough]

@spentacular could you share how this looks please? 👍 What is checking the styles property in package.json?

[pilishen]

@spentacular we centainly cannot expect every package to specify style tag in package.json file ,isn't that right?
have you found other workaround, man?

[spentacular]

@pilishen @oskarrough sorry, I didn't realize y'all asked questions here.

The big part was using those two additional postcss plugins, one for rollup and then postcss import. Here's how postcss-import looks up things:

When importing a module, it will look for index.css or file referenced in package.json in the style or main fields. You can also provide manually multiples paths where to look at.

I had found that the packages I need either specified the style property or the main property as the style export.

[pilishen]

@spentacular @oskarrough actually, my workaround is like this

// do not forget lang specification
<style lang="scss">

    @import 'node_modules/path/to/your/cssfileName'
    // remember, do not add .css extension
<style>

[mathias22osterhagen22]

Is this took in consideration the "scoped" attribute? seen: https://forum.vuejs.org/t/import-style-file-doesnt-scoped/7479