背景
在前端开发中，我们经常使用 CSS 预处理器来提高开发效率，其中一种比较流行的预处理器就是 Less。Less 可以让我们使用类似编程语言的方式来编写样式，然后通过编译生成标准的 CSS 文件。但是，有时候在编译后，我们会发现样式无法显示，这是因为编译后的 CSS 文件没有被正确引入或者样式选择器被覆盖了。
解决方法
1. 确认编译后的 CSS 文件被正确引入
在使用 Less 编译器编译 Less 文件时，我们需要指定输出的 CSS 文件路径。确认编译后的 CSS 文件是否被正确引入是解决样式无法显示问题的第一步。
例如，我们在 Less 文件中定义了以下样式：
@color: #333;
body {
background-color: @color;
}然后使用 Less 编译器将其编译为 CSS 文件：
lessc styles.less styles.css
在 HTML 文件中引入 CSS 文件时，需要确认 CSS 文件路径是否正确：
<link rel="stylesheet" href="styles.css">
如果路径不正确，浏览器将无法加载 CSS 文件，导致样式无法显示。
2. 确认样式选择器被正确应用
在编写 Less 样式时，我们可能会使用嵌套选择器来简化代码。但是，如果嵌套选择器被错误地应用，就可能导致样式无法显示。
例如，我们在 Less 文件中定义了以下样式：
-- -------------------- ---- -------
---------- -
---- -
------ ------
------- ------
----------------- -----
-
-
---- -
------- --- ----- -----
-在编译后生成的 CSS 文件中，.container .box 的样式会被编译为 .container .box 和 .box 两个选择器：
-- -------------------- ---- ------- ---------- ---- - ------ ------ ------- ------ ----------------- ----- - ---- - ------- --- ----- ----- -
如果我们在 HTML 文件中应用 .container .box 的样式，但是 .container 不存在，那么样式就无法显示：
<div class="box"></div>
正确的应用方式应该是：
<div class="container"> <div class="box"></div> </div>
3. 确认样式选择器没有被覆盖
在编写 Less 样式时，我们可能会使用相同的选择器来定义不同的样式，这可能导致样式被覆盖。
例如，我们在 Less 文件中定义了以下样式：
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ ----------------- ----- - ---- - ------- --- ----- ----- -
在编译后生成的 CSS 文件中，.box 的样式会被编译为：
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ ----------------- ----- - ---- - ------- --- ----- ----- -
如果我们在 HTML 文件中应用 .box 的样式，但是只有后一个样式被应用：
<div class="box"></div>
这是因为后一个样式覆盖了前一个样式。正确的应用方式应该是：
<div class="box box-border"></div>
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ ----------------- ----- - ----------- - ------- --- ----- ----- -
总结
在使用 Less 编写样式时，需要注意编译后的 CSS 文件是否被正确引入、样式选择器是否被正确应用以及样式选择器是否被覆盖。只有当这些问题得到解决，才能确保样式能够正确显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f5581a2b3ccec22fd7beef