you can import less with nuxt.config.js

  css: [
    {
      src: 'ant-design-vue/dist/antd.less',
      lang: 'less'
    }
  ],

if you has used babel-plugin-imort , you should remove style: true
like this

build: {
  babel: {
      plugins: [
        [
          'import',
          {
            libraryName: 'ant-design-vue'
            // libraryDirectory: 'es'
            // style: true
          },
          'ant-design-vue'
        ]
      ]
    }
}

i'm not using babel-plugin-import, I have try to import less:

css: [
{
src: 'ant-design-vue/dist/antd.less',
lang: 'less'
}
],

with build config in nuxt.config:

build: {

extend (config, { isDev, isClient }) {
  if (isDev && isClient) {
    config.module.rules.push({
      test: /\.less$/,
      loader: "less-loader",
      options: {
        javascriptEnabled: true,
        "modifyVars": { "primary-color": "#0c93a4" }
      }
    })
  }
},

}

but I got this error:

Module build failed (from ./node_modules/less-loader/dist/cjs.js): // ant-design/ant-motion#44 .bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your options? in /Applications/XAMPP/xamppfiles/htdocs/auth/node_modules/ant-design-vue/lib/style/color/bezierEasing.less (line 110, column 0)

I wonder why javascriptEnabled: true not working

nuxt.config.js:

{
  ...
  build: {
    ...
    loaders: {
      less: { javascriptEnabled: true }
    }
  }
}

It works...

if there is any new response for this issue?

Downgrade Less to: ^2.7.3

The bellow config works for me:

nuxt.config.js

  css: [
    { src: 'ant-design-vue/dist/antd.less', lang: 'less' }
  ],
  build: {
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        ...
      }
    },
    loaders: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': 'rgba(222, 12, 101, 1.0)',
          'component-background': '#ffffff',
        }
      }
    }
  }

Plugins/antd-ui.js

import Vue from 'vue'
import Antd from 'ant-design-vue/lib'

export default () => {
  Vue.use(Antd)
}

package.json

{
  "dependencies": {
    "nuxt": "^2.4.0",
  },
  "devDependencies": {
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
  }
}

@ibelem Your code snippets worked for me. I likely was having different issue than what others were describing above, but just because I didn't comprehend what loader/preprocessor was being used based off of Nuxt's config.js css value, and this made the less-loader modifyVar options I was setting useless.

It appears that when we use Nuxt's default create-nuxt-app with ant-design selected as the ui component lib, the Nuxt.config.js that is generated has css: ['ant-design-vue/dist/antd.css'] as the value.

According to Nuxt documentation for Nuxt.config.js, Nuxt will guess what preprocessor is needed based on that string value here. (In this case, none will be needed for a .css file, so even if we set Loader options and use modifyVars, we never use less-loader to set our global css styles, so there is nothing trying to override them.)

However, I guess since the way we override global theme values with antd is by using less-loader options, we have to make sure we're pre-processing with less-loader so that Webpack/less-loader can do it's thing with modifyVars option.

Had to change from the generate string, to this snippet here:
css: [
{ src: 'ant-design-vue/dist/antd.less', lang: 'less' }
]

And my less-loader modifyVars options began working.

Had some trouble with this because Nuxt let's me kind of not worry about the details of preprocessing or webpack loader behavior during build steps.

This might be an opportunity for create-nuxt-app to default to a configuration that enables you to override the default themes set by antd, idk.

Downgrade Less to: ^2.7.3

I create a project based on vue-cli 3, and add ant-design-vue. Then I got this error, and downgrade Less works...

I still do have this problem, on npm run dev less style of ant designs are working with those code mentioned above but on npm run build and on npm run generate less styles are not working.

It is on my nuxt and I do have also a SASS on my project.

@ronssij Have you tried babel-import-plugin? I have no problems in generate with SASS. And other configs are just like @ibelem 's snippet.

The less options have changed. This may help:

build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {},
    loaders: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: {
            'primary-color': 'rgba(222, 12, 101, 1.0)',
            'component-background': '#ffffff'
          }
        }
      }
    }
  }

The less options have changed. This may help:

build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {},
    loaders: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: {
            'primary-color': 'rgba(222, 12, 101, 1.0)',
            'component-background': '#ffffff'
          }
        }
      }
    }
  }

This one worked for me. Thanks @LikeCarter !

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

checking current version of Nuxt and Ant, this versions works (just check package.json of your Ant installation in node_modules):

yarn add -D less@3.9.0 less-loader@4.1.0

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.