nuxt项目中引入ant design vue的less文件报错.bezierEasingMixin()

爱被打了一巴掌 2022-12-07 12:11 175阅读 0赞

最近使用nuxt@2.14.0版本当中使用，ant desgin vue 这个UI框架进行定制主题。

首先，在nuxt项目当中的assets文件夹当中创建less文件夹，在less文件夹下创建index.less和variable.less文件

![20200915173329602.png][]

在index.less文件当中，引入ant design vue的less文件，variable.less当中写上需要更改的主题变量

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70][]

然后，将index.less引入到nuxt.conifg.js文件当中:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1][]

然后，启动项目

发现报错，报错的内容：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 2][]

首先，在nuxt2.0的nuxt.config.js中配置less

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

在启动项目，发现还是报错：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 3][]

这是因为在nuxt2.12添加后提示没有javascriptEnabled这个属性项，需要添加上lessOptions这个字段，我现在的版本是nuxt@2.14.0因此，需要如下配置；

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

在重新启动，大获成功。

[20200915173329602.png]: /images/20221123/34b0bc8e3ea64cd5bba9418e6917c8b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70]: /images/20221123/f607a8a09ab943ba8534de64cf1d1976.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1]: /images/20221123/d2c9637cf18b4bf8a5313ae8e8a7e962.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 2]: /images/20221123/c94ac1cab8694db5bb5d48698fc81e48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 3]: /images/20221123/3191fed41bf04d80b5afc8770de7dd46.png