账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    在create-react-app里面配置了less后,antd报错?
    89
    0

    最近在学习antd,使用create-react-app这个脚手架,根据网上配置了less,但是start之后ant报错.

    webpack.configi.dev配置代码

    {
                test: /\.(css|less)$/,
                use: [
                  require.resolve('style-loader'),
                  {
                    loader: require.resolve('css-loader'),
                    options: {
                      importLoaders: 1,
                    },
                  },
                  {
                    loader: require.resolve('postcss-loader'),
                    options: {
                      // Necessary for external CSS imports to work
                      // https://github.com/facebookincubator/create-react-app/issues/2677
                      ident: 'postcss',
                      plugins: () => [
                        require('postcss-flexbugs-fixes'),
                        autoprefixer({
                          browsers: [
                            '>1%',
                            'last 4 versions',
                            'Firefox ESR',
                            'not ie < 9', // React doesn't support IE8 anyway
                          ],
                          flexbox: 'no-2009',
                        }),
                      ],
                    },
                  },
                  {
                      loader: require.resolve('less-loader') // compiles Less to CSS
                  }
                ],
              },

    错误信息

    ./node_modules/antd/dist/antd.css
    Module build failed: 
      /* autoprefixer: off */
      filter: progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false);             
    Unrecognised input
     in /Users/heliu/Desktop/ant-echarts/node_modules/antd/dist/antd.css (line 15367, column 16)
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • °吃貨一枚≥0≤ 普通会员 1楼

      create-react-app项目中配置less后,如果出现antd报错,可能是以下几种情况:

      1. 安装antd错误:在create-react-app项目中,首先需要安装antd库,可以通过npm或yarn进行安装。如果安装失败,可以尝试以下步骤:

      a. 在命令行中输入以下命令,安装antdnpm install --saveantd 或者 yarn add --saveantd

      b. 确保在src目录下,添加以下配置文件: javascript .antd/dist/index.css

      c. 重启项目并重新运行create-react-app命令,确认antd库已经正确安装并添加到项目中。

      1. antd版本冲突:antd库可能与项目中已经使用的其他库或组件版本冲突。例如,如果你在项目中已经使用了reactreact-dom等库,那么在配置antd时可能需要确保这些库的版本与antd相同。例如: ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './App.css';

      ReactDOM.render(, document.getElementById('root')); ```

      如果你使用了antd自带的样式表,确保antd.css文件在项目中位于antd/dist目录下。然后在App.css文件中添加以下内容: css @import './antd.css';

      1. antd依赖问题:在项目中使用antd库时,可能需要确保你的项目中有相应的依赖项。例如,如果你在App.css文件中引入了antd的某个组件,但不在antd.css文件中定义组件样式,那么antd组件可能无法正常工作。你需要确保在App.css文件中包含对antd组件的引用,例如: css .ant-cell { font-size: 1rem; }

      2. antd组件配置问题:antd组件可能需要进行特定的配置才能正常工作。例如,如果antd组件使用了动态路由,你需要在App.js文件中配置路由,并确保antd组件可以正确接收路由参数。例如: ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './App.css';

      class App extends React.Component { render() { const { component, routes } = this.props;

         if (routes) {
           return (
             <div>
               <Router>
                 <Route exact path="/" component={component} />
                 {routes.map((route, index) => (
                   <Route key={index} path={route.path} component={route.component} />
                 ))}
               </Router>
             </div>
           );
         }
      
         return <div>Loading...</div>;
       }
      

      }

      ReactDOM.render(, document.getElementById('root')); ```

      如果以上步骤都无法解决问题,可能需要检查antd组件的官方文档,了解其文档中的配置说明或错误信息,以便定位问题原因并进行相应修改。同时,你也可以尝试将antd库的antd.css文件和相应的组件引入到项目中,如果样式冲突依然存在,可能需要重新安装或更新antd库。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部