LESS 是一种 CSS 预处理器，通过 LESS 可以让写 CSS 的过程更加简单、快速、方便。但是在使用 LESS 的过程中，我们有可能会遇到一个比较常见的问题，就是 LESS 编译后页面样式不生效。
这种情况常常出现在我们使用 webpack 等工具来编译 LESS 文件的时候，这时我们需要寻找解决方法。
解决方法
- 检查编译后的 CSS 文件路径是否正确
如果编译后的 CSS 文件路径不正确，则无法正常加载样式。使用 Chrome 浏览器查看页面源代码，查找 CSS 文件路径是否正确。
示例代码：
----- ---------------- ---------------------
如上代码，要确保 css/style.css 的路径是否正确，如果路径不对，可改为正确的路径即可。
- 检查浏览器缓存
如果我们多次修改 LESS 文件，在编译后可能会因为浏览器缓存原因导致页面没有更新。这时，可以在浏览器中清除缓存或者在链接 CSS 文件的 HTML 标签中添加版本号或时间戳，强制更新。
示例代码：
----- ---------------- -----------------------------
- 检查代码书写是否规范
如果 LESS 编译后页面样式不生效，还有可能是因为代码书写不规范导致的，可以通过 Chrome 浏览器的控制台查看是否存在语法错误，及时修正。
- 检查 webpack 配置文件
如果是使用 webpack 等前端打包工具来编译 LESS 文件，则需检查 webpack 配置文件是否正确。要确保 webpack.config.js 文件中已正确配置 less-loader，并且在配置文件中已正确引入相关的 CSS 文件。
示例代码：
-------------- - -
------- -
------ -
-
----- ----------
---- -
---------------
-------------
-------------
-
-
-
-
-总结
在使用 LESS 进行开发的过程中，如果遇到 LESS 编译后页面样式不生效的问题，可以根据以上解决方法逐一排查。同时，也要注意代码规范，以及正确配置 webpack 等前端打包工具的配置文件。
在日常开发中，通过不断地总结和积累经验，我们可以掌握更多的技巧和技能，提高我们的前端技能水平。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653b2ad47d4982a6eb5805b4