and design vue with nuxt js 2 less loader problem

[munzirstudio]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

I'm using nuxt and-design-vue with nuxt by using chen-yan guide on support nuxt.js #146 ticket. However ant-design-vue less loader unable to load in the latest version of nuxt 2. with this problem:

× error \node_modules\ant-design-vue\dist\antd.less:1 (function (exports, require, module, __filename, __dirname) { @import "../lib/style/index.less"; ^ SyntaxError: Invalid or unexpected token

is it problem with webpack 4?

What does the proposed API look like?

i try to find solution but still not working.

[MaZhaolin]

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'
        ]
      ]
    }
}

[munzirstudio]

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

[shanlh]

nuxt.config.js:

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

It works...

[yasz]

if there is any new response for this issue?

Downgrade Less to: ^2.7.3

[ibelem]

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.

[HenryYong]

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...

[ronssij]

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.

[EmiyaYang]

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

[LikeCarter]

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'
          }
        }
      }
    }
  }

[luisfrocha]

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 !