很多初学前端的开发同学一定有一种想法，就是如何更改网站的主题。前年（2018），我也陷入了思考，如何切换网站主题呢？当时不知道less，只想到一种办法，就是利用javascript的能力去修改每个节点的样式。这样做有很大的弊端，比如：

• 节点元素的更换、类名或者特殊标记冲突导致功能不能如期工作，还需要跟随修改js代码。
• js代码难以维护。

随着慢慢的接触预编译css，如今又有一种想法，就是利用预编译的特性和less提供的功能实现切换主题，具体流程如下：

• 编写好less文件
• 使用less.modifyVars改变变量
• less会重新计算依赖此变量的样式规则（less负责）
• 输出到style中 （less负责）

注意：如果使用webpack打包工具，并且使用了less-loader时是无法去改变变量，因为在less-loader中已经预编译好less文件到css，less-loader没有提供less变量出来，所以并不能修改，也就达不到预期的效果。

在线预览地址 https://codepen.io/linkontoask/pen/VwYdjPM