Import css from node_modules

Help Requests
1

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
2

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
3

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
4

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