How to enable inline JavaScript for LESS in Nuxt.js?

Question

In a Nuxt.js project, I've npm installed less and less-loader so I can have dynamic CSS for iView. However, when I try to overwrite iView's global variables, an error appears: "Inline JavaScript is not enabled. Is it set in your options?"

In Nuxt.js docs (https://nuxtjs.org/api/configuration-build#loaders) they state they have a preconfigured less loader. less: {}, so I tried...

less: {
  javascriptEnabled: true
}

and...

less: {
  options: {
    javascriptEnabled: true
  }
}

and even...

less: {
  dev: {
    options: {
      javascriptEnabled: true
    }   
  }
}

Nuxt.js seems to ignore all of this. So how should I configure it in Nuxt.js?

Answer 1

Add this to your nuxt.config.js

/*
 ** Build configuration
 ** See https://nuxtjs.org/api/configuration-build/
 */
build: {
    /*
     ** You can extend webpack config here
     */
    loaders: {
        less: {
            lessOptions: {
                javascriptEnabled: true,
            },
        },
    },
},

Answer 2

you can do it

 build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, { loaders: { less } }) {
      less.javascriptEnabled = true
    }
  }