按需引入antd報錯問題


1.使用create-react-app工具創建了一個項目

create-react-app antd-demo

2.安裝babel-plugin-import

npm install babel-plugin-import --dev

3.按需引用antd

在App.js里面引入,

import { Button } from 'antd';

package.json里面配置babel

 "babel": {
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
      ]
    ]
  },

  最后項目啟動報錯,報錯信息如下

./node_modules/antd/lib/button/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 E:\webstrom\migu\ngoc\web\react-interface\react-interface-cli\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0)

  最后把"style":“css”就可以了

這里的style可以為true或者‘css’,但是不知道為什么使用true就報錯,

babel-plugin-import配置,options可以為數組

{  
  "plugins":[["import",options]]  
} 

導入js模塊:

["import", { "libraryName": "antd" }]  

 導入js和css模塊(LESS/Sass源文件):

["import", { "libraryName": "antd", "style": true }] 

  導入js和css模塊(css 內置文件):

["import", { "libraryName": "antd", "style": "css" }]  

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM