zoukankan      html  css  js  c++  java
  • 按需引入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:webstrommigu
    gocweb
    eact-interface
    eact-interface-cli
    ode_modulesantdlibstylecolorezierEasing.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" }]  
    

      

  • 相关阅读:
    前端面试集锦
    nodeJs上传附件
    逻辑于 逻辑或
    webpack 学习笔记 (一)
    yum 安装mongodb mysql
    闭包面试提 (2)
    主动的重要性
    1.1一天一题:逆转字符串
    编程提高:一天一道编程题
    iconv将文件编码从gb2312 转换为utf-8
  • 原文地址:https://www.cnblogs.com/heihei-haha/p/9041093.html
Copyright © 2011-2022 走看看