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

时间:2019-06-25 15:53:20

标签: vue.js less 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)

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
        }
      },
    },
...

它可以工作,但是现在我想实现黑暗模式,因此我需要通过如下代码动态修改var:

component.vue

<script>
import less from 'Less'

export default {
  ...
  methods: {
    changeTheme() {
      less.modifyVars(
        ...
      )
    }
  ...
}
...

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

  

收拾完毕,没有纸张

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

0 个答案:

没有答案