How to use .less file in nuxt 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.

user_8816585 · Answer

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