NPM是一個包管理工具,可以用來方便地引用公共的CSS樣式。當我們需要使用一些UI組件庫、CSS框架或者其他公共的CSS資源時,就可以通過NPM來下載并引用這些資源。
在npm中引用公共的CSS資源,需要先通過npm安裝對應的包。比如,我們想引用bootstrap框架的CSS資源,就可以在終端中輸入以下命令:
npm install bootstrap
安裝完成后,我們就可以在項目中引用這些CSS資源了。以使用bootstrap為例,我們可以在html文件中通過標簽來引用:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
在實際應用中,我們可能需要自定義一些CSS樣式來適配我們的網站,這時可以創建一個自定義的CSS文件,并將它引入到HTML文件中。如下所示:
<link rel="stylesheet" href="/styles/custom.css">
同時,在這個自定義的CSS文件中,可以通過@import關鍵字引入npm安裝的包中的CSS文件,如下所示:
@import "~bootstrap/dist/css/bootstrap.min.css";
其中,~表示從node_modules文件夾中引入文件。這樣在編寫自定義CSS樣式時,就可以使用bootstrap框架中的樣式來作為基礎,快速地實現樣式效果。
上一篇nuxt全局引用css
下一篇html5的黑體代碼