问题背景
在前端开发中，我们通常使用 LESS/CSS 预编译器来编写 CSS，其中 LESS 是一种动态样式语言，可以使 CSS 更具维护性和灵活性。然而，有时候我们会遇到这样的问题：LESS 编译出来的 CSS 样式不起作用。
可能原因
未正确引入 CSS 文件。
less 文件未编译为 CSS 文件。
样式优先级冲突。
解决方法
1. 确认 CSS 文件是否正确引入
在 HTML 文件中，使用 <link> 标签引入 CSS 文件，例如：
<link rel="stylesheet" href="/path/to/style.css">
当 LESS 文件编译为 CSS 文件后，需要确保在 HTML 文件中引入的是 CSS 文件而不是 LESS 文件，否则样式不会生效。例如：
<!-- 无效的引入方式 --> <link rel="stylesheet" href="/path/to/style.less"> <!-- 正确的引入方式 --> <link rel="stylesheet" href="/path/to/style.css">
2. 确认 LESS 文件是否正确编译为 CSS 文件
在使用 LESS/CSS 预编译器时，需要确保 LESS 文件正确编译为 CSS 文件，并且 CSS 文件与 HTML 文件在同一目录下，例如：
# 假设输入文件为 style.less，输出文件为 style.css lessc style.less -o style.css
3. 确认样式优先级冲突
在 CSS 中，样式具有优先级，通常是由选择器的特殊性、重复定义等因素决定的。如果样式优先级相同，后定义的样式会覆盖先定义的样式。因此，可能需要调整样式的书写顺序或加上更具体的选择器来解决优先级冲突。例如：
<!-- HTML --> <div class="box">Box</div>
-- -------------------- ---- -------
-- --- --
---- -
----------------- ----
------ ------
-
-- ---------- ----- --
--------- -
----------------- -----
------ -------
-总结
当 LESS 编译出来的 CSS 样式不起作用时，我们需要先排除引入文件和编译问题，再确认样式优先级冲突。只有在了解了这些问题的解决方案后，我们才能更加高效地解决这样的问题，从而助力前端开发工作的顺利进行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f5f7d980a9b385b8e6af7