什么是 html-styles？
html-styles 是一个用于在 HTML 中添加样式的库。它提供了一系列的 CSS 类名，使得我们可以通过添加这些类名来快速地实现一些样式效果，而无需自己编写 CSS 代码。html-styles 的官方地址是 https://github.com/btholt/html-styles 。
如何使用 html-styles？
首先，在你的项目中安装 html-styles 。
npm install html-styles
然后，在你的 HTML 文件中引入 html-styles 样式文件。
<html> <head> <link rel="stylesheet" href="node_modules/html-styles/css/main.css"> </head> <body> ... </body> </html>
接下来，你可以使用 html-styles 提供的 CSS 类名来设置元素的样式。比如：
<div class="p1">这是一个段落</div>
上面的代码中，类名 “p1” 是 html-styles 提供的，它可以使该元素的左右边距为 1 个单位。
除了“p1”之外，html-styles 还提供了很多其他的类名，可以用来设置元素的高度、宽度、背景颜色、字体样式等等。在这里，我就不一一列举了，可以查看官方文档获取更多信息。
常见问题
问题一：html-styles 的样式不起作用。
我们需要检查以下几点：
- 确定在 HTML 文件中引入了 html-styles 样式文件；
- 确定在 HTML 元素中加入了正确的 css 类名；
- 确定 css 文件路径是否正确；
- 如果是通过 Webpack 或其他构建工具来管理项目的，还需要检查相关配置是否正确。
问题二：如何修改 html-styles 中的样式？
html-styles 内部是通过 Sass 变量来定义样式的。我们可以修改这些变量的值，来更改 html-styles 的样式。具体操作如下：
首先，在你的项目目录下新建一个 sass 文件夹，并在该文件夹中新建一个 variables.scss 文件。在该文件中，你可以定义新的 Sass 变量并指定它们的值。比如：
$bgColor: #f0f0f0; $fontSize: 14px;
变量定义好后，我们需要将这些变量引入到 html-styles 中。我们可以在 main.scss 文件中引入 variables.scss 文件并使用定义的变量来覆盖 html-styles 的样式。
@import "./variables.scss"; @import "./html-styles";
这样，我们就可以修改 html-styles 的样式了。
结语
html-styles 可以让前端开发者在不编写 CSS 代码的情况下，快速地实现一些常用的样式效果。使用起来也非常方便。当然，如果我们需要对样式进行更加定制化的设置，还是需要自己编写 CSS 代码的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f002da5403f2923b035bc77
