无法在Less / Nuxt.Js中动态修改变量

Nad*_*x56 5 less vue.js nuxt.js less-loader

我正在使用Nuxt.Js和Ant作为前端框架来构建Web平台。我看到可以使用Less and Less-loader更改Ant的主题。所以我在构建之前用以下代码完成了它:

antd-ui.js

import Vue from 'vue'
import Antd from 'ant-design-vue/lib'

Vue.use(Antd)
Run Code Online (Sandbox Code Playgroud)

nuxt.config.js

...
css: [
    {
      src: 'ant-design-vue/dist/antd.less',
      lang: 'less'
    }
],
...
build: {
    transpile: [/^element-ui/],
    loaders: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          // You can here change your Ant vars
        }
      },
    },
...
Run Code Online (Sandbox Code Playgroud)

这样就可以了,但是现在我想实现暗模式,因此我需要通过如下代码动态修改var:

component.vue

<script>
import less from 'Less'

export default {
  ...
  methods: {
    changeTheme() {
      less.modifyVars(
        ...
      )
    }
  ...
}
...
Run Code Online (Sandbox Code Playgroud)

但是我在控制台中有以下消息:

少完成了,没有加载任何表

一切都没有改变...所以,如果您能以任何方式帮助我,请先谢谢!