简介
@nutastic/nf-admin-legacy-assets 是一个适用于前端的 npm 包。它提供了多种常用的前端资产，包括样式、图标、字体等，可以方便地集成到你的项目中，使你的开发流程更加高效。
安装
使用 npm 安装该包：
npm install @nutastic/nf-admin-legacy-assets --save
使用
样式
reset.css
reset.css 是一个旨在在所有浏览器中重置样式的 CSS 文件。
/* 引入 reset.css */
@import "~@nutastic/nf-admin-legacy-assets/css/reset.css";
/* 使用 reset.css */
body {
margin: 0;
padding: 0;
}layout.css
layout.css 是一个旨在提供基本布局的 CSS 文件。
/* 引入 layout.css */
@import "~@nutastic/nf-admin-legacy-assets/css/layout.css";
/* 使用 layout.css */
.container {
max-width: 1200px;
margin: 0 auto;
}icon.css
icon.css 是一个包含了多种常用图标的 CSS 文件。
/* 引入 icon.css */ @import "~@nutastic/nf-admin-legacy-assets/css/icon.css"; /* 使用 icon.css */ <button class="icon icon-search"></button>
字体
@nutastic/nf-admin-legacy-assets 提供了多种常用字体，包括 Roboto、Lato 等。你可以通过以下方式引入字体：
/* 引入字体 */
@import url("~@nutastic/nf-admin-legacy-assets/fonts/Roboto/Roboto.css");
/* 使用字体 */
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
}示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
-----------------
---- ---- ---
----- ---------------- -------------------------------------------------------------------
----- ---------------- --------------------------------------------------------------------
----- ---------------- ------------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------------
-------
-- ----- --
---------- -
----------------- -----
-------- -----
-
------ -
------- -----
-
--------
-------
------
---- ------------------
--------- ----------
------- ----------- ----------------------------
------- ----------- ------------------------
------
-------
-------总结
@nutastic/nf-admin-legacy-assets 提供了多种常用前端资产，可以方便地集成到你的项目中。它的优势在于减少了重复造轮子的时间和精力，加快了开发流程。希望这篇文章能够帮助你更好地理解和使用该 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822d42