How to use .less file in nuxt js - vue.js

Question

I created a .less file in my assets/css/myfile.less Nuxt folder and I added some CSS to it.
.edit-btn-color {
background-color: #b1c646;
color: white;
}
.edit-btn-color:hover {
background-color: darken(#b1c646, 10%);
color: white;
}
and in nuxt.config.js I do the following:
export default {
less: ['#/assets/css/myfile.less'],
}
But it does not work.

Answer 1

Since Nuxt2 is still using Webpack4, you need to install the v7 of less-loader (v8 is using Webpack5)
yarn add less-loader#^7 less
Then, create a .less file somewhere, like /assets/css/myfile.less
And use it in nuxt.config.js with this
export default {
css: ['~/assets/css/myfile.less'],
}
The key to use here is css, it's the same for SCSS, SASS, Less, Stylus and so on, as shown in the documentation: https://nuxtjs.org/docs/2.x/features/configuration#the-css-property

Answer 2

The answer for Nuxt v3 would be:
Install Less: npm i less (no less-loader needed).
For Global styles add them to your nuxt.config.ts like this:
export default defineNuxtConfig({
css: ['~/assets/less/main.less'],
})
In your components you could use Less like this:
<style lang="less" scoped>
#import (reference) '../assets/less/helpers.less';
nav {
background-color: darkkhaki;
.my-great-style; /* Imported from helpers.less */
}
</style>