如何從通過npm安裝的庫中引用CSS？

Question

例如，我說我安裝了一些東西：

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

Answer 1

有一個名為npm-css的包

在webpack中你可以要求css像require('bootstrap.css') ，這就是為什么通過npm安裝css非常有用

如果你沒有它，你可以創建一個npm腳本任務，需要（使用fs.readFile）來自node_modules的所有css文件，將它們編譯成單個文件（這是npm-css所做的）

Answer 2

實際上，沒有必要在html頭中明確引用css文件。 因為你已經通過npm參與了css庫，所以一旦你運行npm start來運行你的項目，Node.js將加載所有node_moudules，其中還包括你需要的css庫。

Answer 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" />

並且它正確無誤