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

Posted 2023-03-07

【中文标题】如何从通过 npm 安装的库中引用 CSS？

【英文标题】：How to reference CSS from libraries installed via npm?

【发布时间】：2016-10-26 18:59:15

【问题描述】：

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

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 文件？

【问题讨论】：

您的工具包中还有哪些其他工具？您是将 something.css 与其他文件连接还是直接使用它？

我目前正在使用通过 Gulp 编译的 Sass。位于 ./views/styles.scss 中的“主” Sass 文件。

为什么不使用绝对路径？

那你为什么不直接使用 Gulp 将 something.css 复制到你的 web 应用公共资产文件夹范围内的文件夹中呢？

IMO 使用 bower 来安装这类软件包更容易，并且有很多 gulp 任务可以在 html 文件中自动包含源代码（css、js）。通常，您要查找的此类信息（要加载的文件的路径）位于每个包的 package.json 或 bower.json 中。

【参考方案1】：

有一个名为npm-css的包

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

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

【参考方案2】：

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

【讨论】：

假设他的服务器是基于nodejs的。

事实并非如此。它是 php。

【参考方案3】：

取决于您使用的模块加载器。例如 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" />

它纠正了没有任何伤害