javascript - How to reference CSS from libraries installed via npm? - Stack Overflow

admin管理员组

文章数量:1278789

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?

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?

• javascript
• html
• css
• node.js
• npm

Share Improve this question Follow asked Jun 24, 2016 at 8:10 user818700user818700 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? – elad.chen Commented Jun 24, 2016 at 8:13
• I am currently using Sass that gets piled via Gulp. The "main" Sass file sitting in ./views/styles.scss . – user818700 Commented Jun 24, 2016 at 8:15
• Why not use absolute paths? – David Jones 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 ? – elad.chen 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. – koox00 Commented Jun 24, 2016 at 8:22

Add a ment  | 

3 Answers 3

Sorted by: 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, pile them into single file (which is what npm-css does)

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.

Depending on which module loader you are using . For example Webpack then please read this link https://github./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

本文标签： javascriptHow to reference CSS from libraries installed via npmStack Overflow