How to include a css/js file from a node package?

Question

I have in stalled an npm package. Now I want to include the css and js files in my html page by typing something like this:

      <link href="/root/node_modules/quill/dist/quill.snow.css" rel="stylesheet">

But the above path does not work. My html page is located at /var/www/html What is the right way to do this. This is probably a duplicate but I am not able to find the answer.

can you edit your post to provide the file structure (preferably as text) — Yvonne Aburrow, Oct 12 '18 at 16:14

Yvonne Aburrow · Accepted Answer · 2018-10-12T16:32:55.183

1

You need to make sure that your CSS and JS files are in the same directory (probably src/app) as your HTML files.

e.g.

src
 |
 | app
    |
    | css
    | js
   index.html

so the path to index.html in the web version is /index.html, and the path (relative to index.html) to the CSS folder is ./css.

Here's a great explanation of relative paths in node applications.

When using 3rd-party libraries such as CSS in node modules, you can use this in your stylesheet:

@import "~quill/dist/quill.snow";

You will also need to require the module in your config file - see this discussion in GitHub for more info.

edited Oct 12 '18 at 16:32

answered Oct 12 '18 at 16:18

Yvonne Aburrow

2,602
1
17
47

So I just copy the full package directory to my the website folder? – C1rcu1tB04rd Oct 12 '18 at 16:22
ah, if they are library CSS files that would be different – Yvonne Aburrow Oct 12 '18 at 16:23
Sorry I don’t get that. – C1rcu1tB04rd Oct 12 '18 at 16:25
I mean if they are part of the npm package, you should use them from there. Just trying figure out how you should reference them, I'll be right back :) Are you using SCSS? – Yvonne Aburrow Oct 12 '18 at 16:26
Thanks alot hope you will be able to help – C1rcu1tB04rd Oct 12 '18 at 16:27
Thank you but what if I want to add a .js file. When i try for example require(“/root/test.js”) it says that require is not definded – C1rcu1tB04rd Oct 12 '18 at 16:45
if you look at this answer on that github discussion, it shows how to do the requiring of js files in your config file. https://github.com/webpack/webpack/issues/1789#issuecomment-250955864 – Yvonne Aburrow Oct 12 '18 at 16:47
The `require is not defined` error is caused by trying to run your require file in the browser. See the answers to this question for what to do about it. https://stackoverflow.com/questions/31931614/require-is-not-defined-node-js/31931649 – Yvonne Aburrow Oct 12 '18 at 16:50
1

Tanks alot for helping! – C1rcu1tB04rd Oct 12 '18 at 16:50

How to include a css/js file from a node package?

1 Answers1