如何从通过npm安装的库中引用CSS?

时间:2016-06-24 08:10:35

标签: javascript html css node.js npm

例如说我安装了一些东西:

npm install --save something

然后下载到

./node_modules/something/

并且其中有一个文件夹,可能名为styles,而 该文件夹中有something.css。我如何在我的html文档中包含该css文件(如果我的html文档位于node-modules文件夹旁边?

我的意思是我可以在我的html头中执行此操作:

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

但是在你的node_modules目录中挖掘东西感觉不对。特别是如果html文档可能需要缩小然后扔进一些./dist/目录。因为那时something.css的路径已关闭..

没有办法简单地去:

<link rel="stylesheet" href="something.css" type="text/css" media="screen" />
在你的html文档中

- 无论它在你的项目结构中的哪个位置 - 它只是知道去哪里找到那个css文件?

3 个答案:

答案 0 :(得分:3)

有一个名为npm-css

的包

在webpack中你可以要求像require('bootstrap.css')这样的css,这就是为什么通过npm安装css非常有用

如果你没有它,你可以创建一个npm脚本任务,它需要(使用fs.readFile)来自node_modules的所有css文件,将它们编译成单个文件(这是npm-css所做的)

答案 1 :(得分:0)

实际上没有必要在html头中明确引用css文件。 因为您已经通过npm参与了css库,所以一旦运行npm start来运行项目,Node.js将加载所有node_moudules,其中还包括您需要的css库。

答案 2 :(得分:0)

取决于您使用的模块加载程序。例如Webpack 那么请阅读此链接https://github.com/JedWatson/react-select/issues/176

否则,在您的服务器中,您需要将node_modules作为静态文件目录,然后才能安全地执行

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

它正确无误