使用antd報less的錯誤

xiaobaiha發表於2018-06-29

問題描述

在使用antd元件庫時，按照官方文件建立config-override.js,使用react-app-rewired進行build或者start時，會報

./node_modules/antd/lib/menu/style/index.less
Module build failed:

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in D:\Git\career_guide_front\node_modules\antd\lib\style\color\bezierEasing.less (line 108, column 0)
複製程式碼

的錯誤。

解決方案

主要進行2處修改，首先這個問題在antd的issue中有提及，官方說在3.6.4版本中已經修復，所以首先檢查antd的版本。實際解決中，改變版本未解決less報錯的問題，所以按照之前的方案對config-override.js進行修改

檢查antd版本

開啟package.json檔案，在dependencies下找到antd版本，若小於3.6.4，建議修改成3.6.4然後使用npm或者yarn對antd重新進行安裝。

對config-override.js進行修改

開啟config-override.js，新增配置

config = rewireLess.withLoaderOptions({
    modifyVars: { "@primary-color": "#1DA57A" },
    javascriptEnabled: true,
  })(config, env);
複製程式碼

相關文章