@tablelist/css-important-loader 是一个用于解决 CSS 样式优先级问题的 npm 包。在一些特殊情况下，使用 important 可以提高样式优先级，但是对于一个大型的项目来说，添加这样的标记可能非常繁琐且不可控。而这个包，就可以自动给指定的样式添加 important。
安装
你可以在你的项目中通过如下命令安装这个 npm 包：
npm install @tablelist/css-important-loader --save-dev
使用方法
在 webpack 的配置文件中，添加如下代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
------- ---------------------------------
-
-
-
--这样，所有后缀名为 .css 的文件都会自动添加 important。
你也可以通过配置，只为某些 css 文件添加 important。需要修改上面的配置，添加 options 选项：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
------- ----------------------------------
-------- -
-------- ----------------------
-
-
-
-
--以上配置，只为依赖于 magic 包的 css 文件添加 important。
示例代码
以下是一个使用该 loader 的示例：
-- -------------------- ---- -------
--------- -----
------
------
-------------------------------------- ------------
-------
---- -
------ ------
------- ------
----------------- ----
-
--------
-------
------
---- ------------------
-------
-------在样式中添加 .box 选择器的样式为：
.box {
width: 200px;
height: 200px;
background-color: green;
}但是，由于样式文件中已经存在了 .box 的样式，所以无法生效。这时，可以在 webpack 的配置文件中添加上述的 config，就可以自动为 .box 添加 important 了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556d481e8991b448d3ac5