less.modifyVars方法切換主題樣例

該demo的前期准備：

使用vue-cli搭建一個支持less的項目

demo的源碼地址：https://github.com/YukiGreen/less-modifyvars-demo

參考地址：https://github.com/1019483075/lingxi/issues/26

遇到的坑總結：

1、寫less的樣式文件，使用@import 報錯。

解決辦法：在vue.config.js中加入如下配置即可：

module.exports = {
  css: {
    // css預設器配置項
    loaderOptions: {
        less: {
            // 若 less-loader 版本小於 6.0，請移除 lessOptions 這一級，直接配置選項。
            modifyVars: {
                // 初始化可直接覆蓋變量
                '@error-color': '#1890FF',
              },
              javascriptEnabled: true
            },
          }
        }
};

2、寫的less的樣式文件夾styles，不放到public文件夾下，報錯‘less.min.js:10 GET http://localhost:8080/src/styles/index.less 404 (Not Found)’，解決辦法：

將styles文件夾放到public下，並在index.html中導入外部樣式表。

3、用less.modifyVars切換樣式不生效；代碼如下：

    changeTheme () {
      console.log(this.theme, window.less)
      this.theme = !this.theme
      // 調用 `less.modifyVars` 方法來改變變量值
      // 定義variable.js是因為如果直接將less變量放在modifyVars中切換的效果只會生效一次，所以根據切換的狀態使用對應的less變量。
      window.less.modifyVars(this.theme ? lightTheme : darkTheme)
    }

解決辦法：需要在index.html中導入樣式文件，然后再導入less.js解析less文件，先后順序不能顛倒。less.js或less.min.js可在官網下載。

 

 

4、報less is not defined，解決辦法：