v-easy-components change theme

很多初學前端的開發同學一定有一種想法，就是如何更改網站的主題。前年（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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的css less 不要作用到子对象_使用Less实现网站主题切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。