配置less-loader

第一次在项目中引入ant-design组件库,需要配置less语言。
yarn add less-loader后提示

.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      Error in E:\dataStru\antd-demo\node_modules\ant-design-vue\es\style\color\bezierEasing.less (line 110, column 0) 

查阅资料得知需要配置loader
历史资料显示这样配置

// vue.config.js
module.exports = {
  css: {
    loaderOptions: { 
      // 向 CSS 相关的 loader 传递选项 
      less: {
        javascriptEnabled: true
      } 
    } 
  },
}

但配置完后提示

Module build failed (from ./node_modules/less-loader/dist/cjs.js):
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'javascriptEnabled'. These properties are valid:
   object { lessOptions?, prependData?, appendData?, sourceMap?, implementation? }

提示javascriptEnabled这个选项在新版本中不受支持了
查阅官网less-loader得知此属性在新版本中被放在了lessOptions下面,所以正确的配置为

// vue.config.js
module.exports = {
  css: {
    loaderOptions: { 
      // 向 CSS 相关的 loader 传递选项 
      less: {
        lessOptions: {
          javascriptEnabled: true
        } 
      } 
    } 
  },
}

成功解决

Logo

前往低代码交流专区

更多推荐