CODEWITHSUNDEEP
vue.jsnuxt.jsless
chaitanya gupta
chaitanya gupta

Reputation: 352

How to use .less file in nuxt js

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.

Upvotes: 3

Views: 4309

Answers (2)

Leopold Kristjansson
Leopold Kristjansson

Reputation: 2784

The answer for Nuxt v3 would be:

  1. Install Less: npm i less (no less-loader needed).
  2. For Global styles add them to your nuxt.config.ts like this:
export default defineNuxtConfig({
  css: ['~/assets/less/main.less'],
})
  1. 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>

Upvotes: 1

kissu
kissu

Reputation: 46676

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

Upvotes: 5

Related Questions