在 Web 前端开发中，我们经常需要对鼠标指针的样式进行自定义。mouse-pointer 是一款基于 Webpack 和 Sass 的 npm 包，能够快速方便地对鼠标指针样式进行定制和使用。
安装
首先，我们需要使用 npm 进行安装：
npm install mouse-pointer
使用
CSS 引入
在 HTML 页面中引入 mouse-pointer 的 CSS 文件：
<link rel="stylesheet" href="node_modules/mouse-pointer/dist/mouse-pointer.css">
然后就可以在自己的 CSS 中调用 mouse-pointer 的类名了：
.custom-pointer {
@extend .mp-pointer;
color: #f00;
}JS 引入
如果通过 Webpack 打包项目，则可以直接通过 import 引入 mouse-pointer：
import "mouse-pointer/dist/mouse-pointer.css"; // 使用方式同上
样式定制
mouse-pointer 的默认样式包含了多种鼠标指针样式，如 mp-pointer、mp-grab、mp-grabbing 等等。用户也可以通过重写或扩展 Sass 变量，来定制自己的鼠标指针样式。
比如，我们可以在自己的 Sass 文件中定义变量 mp-color，来改变指针的颜色：
$mp-color: #f00;
.custom-pointer {
@extend .mp-pointer;
color: $mp-color;
}还可以通过修改 Sass 变量 mp-map 来新增鼠标指针样式：
-- -------------------- ---- -------
-------- -
--------- -
--------- ----------------------------------- -- ----
-------- --- -- ----
--------- --- -- ----
------------- ------------ -- ----
---------------- ---- -- ----
--------- --- ----- ----- -- --
------------- - - --- ---- -- --
-
--
--------------- -
------- ------------------
-示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------- ------------
----- ---------------- ---------------------------------------------------------
-------
--------------- -
------- ------------
------ -----
-
-------- -
--------- -
--------- -------------------------
-------- ---
--------- ---
------------- ------------
---------------- ----
--------- --- ----- -----
------------- - - --- ----
-
--
----------------- -
------- ------------------
-
--------
-------
------
----------------- ---------
--------------- ------------------------ -------------
-------------- ---------------------------- -------------
-------------- ------------------------------ -------------
------- ----------------------------------------------------------------
-------
-------总结
通过 mouse-pointer，可以快速定制和使用鼠标指针样式，提高网站的用户体验。而对 Sass 变量的修改和扩展，也可使得鼠标指针样式更加个性化和出彩。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672281e8991b448e394c