18

So for example say I installed something:

npm install --save something

and it downloads into

./node_modules/something/

and it has a folder in there perhaps called styles and in that folder you have something.css. How would I include that css file in my html document (if my html document was along-side the node-modules folder?

I mean I could do this in my html head:

<link rel="stylesheet" href="./node_modules/something/styles/something.css" type="text/css" media="screen" />

But it feels wrong to go dig in your node_modules directory for stuff. Especially if the html document perhaps needs to get minified and then thrown into some ./dist/ directory. Because then the path to something.css is off..

Isn't there a way to simply just go:

<link rel="stylesheet" href="something.css" type="text/css" media="screen" />

in your html document - regardless of where it's sitting in your project structure - and it'll just know where to go find that css file?

Improve this question
5
  • What other tools are in your tool kit ? are you concatenating something.css with some other files or just using it as it is? Commented Jun 24, 2016 at 8:13
  • I am currently using Sass that gets compiled via Gulp. The "main" Sass file sitting in ./views/styles.scss . Commented Jun 24, 2016 at 8:15
  • Why not use absolute paths? Commented Jun 24, 2016 at 8:15
  • Then why don't you just use Gulp to copy something.css to a folder scoped to your web app public assets folder ? Commented Jun 24, 2016 at 8:16
  • IMO using bower to install these kind of packages is easier and there are a lot of gulp tasks to include sources (css, js) automatically in html files. Usually this kind of info (the path of the file to load) you are looking for resides inside the package.json or bower.json of each package. Commented Jun 24, 2016 at 8:22

3 Answers 3

Reset to default
3

There is a package for this called npm-css

In webpack you can require css like require('bootstrap.css'), this is why installing css via npm quite useful

if you don't have it, you can create a npm script task that would require (with fs.readFile) all the css files from the node_modules, compile them into single file (which is what npm-css does)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Depending on which module loader you are using . For example Webpack then please read this link https://github.com/JedWatson/react-select/issues/176

Otherwise in your server you need to have node_modules as static file directory and then you can safely do

<link rel="stylesheet" href="./node_modules/something/styles/something.css" type="text/css" media="screen" />

and it correct no harm in that

Improve this answer

Comments

-1

Actually there's no need to reference the css files explicitly in your html head. Because you've already involved the css library via npm ,once you run npm start to run your project , Node.js will load all the node_moudules which also includes the css libraries you need.

Improve this answer

2 Comments

Assuming he's server is based on nodejs.
Which it is not. It's PHP.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.