Import css from node_modules

Iā€™m trying to use c3.js to add some charts and graphs to my site. I did an npm install c3 and am able to reference c3 in my VM using @import c3 from 'c3'.

However, the associated .css is not loaded so there are a few quirky display issues.

What is the best way to reference the associated c3.min.css from the c3 folder of my node_modules?

  • Do I have to copy the .css file locally into my src? (Yuck)
  • Do I do an import with a hardcoded reference to the css file: node_modules\c3\dist\c3.min.css. (Yuck again)
  • Do I simply load it from cdnjs in my index.ejs file? <link rel="stylesheet" href=".../c3.min.css" />
  • Given that webpack/node are able to locate c3 without a path when referencing it in my VM (@import c3 from 'c3'), is there a way to do the same with css?

Thanks for your help

1 Like

Try doing something like this:

import c3 from 'c3';
import 'c3/dist/c3.min.css';

But it depends on how your webpack is setup for css too.

1 Like

Wow, that was way too easy! :slight_smile:

So one further question. Should I do that in main.js or only in the VMs that actually need to display reporting? If I have multiple VMs that use reporting, will the .css get loaded multiple times ā€“ or does that all depend on webpack?

1 Like

If you are using it more than once, it makes sense to put it in main.js, but Iā€™m sure webpack prevents it from duplicating if you want to put it in multiple VMs

1 Like