react 引入ant的less文件后报错，不知道如何才能正确引用

Question

根据ant官方的使用方法，我在react里面使用了ant

import { Table, Button } from 'antd';

这样已经能正常使用里面提供的组件了，

但后来我想修改Table组件里面的一些样式，在还没修改前，先按照官方的方法引入ant里面的less文件

import 'antd/dist/antd.less';

然后

npm run build

就报错，如果把less改成css就不会报错

后面使用ant官方说的按需引入方案

import DatePicker from 'antd/lib/date-picker';  // 加载 JS
import 'antd/lib/date-picker/style/css';        // 加载 CSS
// import 'antd/lib/date-picker/style';         // 加载 LESS

也是引入css就没错，引入less就报错
最后改为用使用 babel-plugin-import做按需引入，

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

也是一样
npm run build的报错信息如下：

Failed to compile.

./node_modules/antd/es/input/style/index.less
Module build failed:


@import "./search-input";
^
Can't resolve './search-input' in 'F:\webproject\old\user\marketmgr\thirdmanager\my-app\node_modules\antd\es\input\style'
      in F:\webproject\old\user\marketmgr\thirdmanager\my-app\node_modules\antd\es\input\style\index.less (line 33, column 0)


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 build: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\keiouks\AppData\Roaming\npm-cache\_logs\2018-02-28T01_24_26_181Z-debug.log

不管使用哪种方法，只要引入ant里面的less，就报这个错

我已经安装了less和less-loader，下面是webpack的配置

          {
            test:/\.less$/,
            loaders:['style-loader','css-loader','less-loader']
          },
          // "file" loader makes sure those assets get served by WebpackDevServer.
          // When you `import` an asset, you get its (virtual) filename.
          // In production, they would get copied to the `build` folder.
          // This loader doesn't use a "test" so it will catch all modules
          // that fall through the other loaders.
          {
            // Exclude `js` files to keep "css" loader working as it injects
            // its runtime that would otherwise processed through "file" loader.
            // Also exclude `html` and `json` extensions so they get processed
            // by webpacks internal loaders.
            exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.scss$/, /\.less$/],
            loader: require.resolve('file-loader'),
            options: {
              name: 'static/media/[name].[hash:8].[ext]',
            },
          },

希望指点

Answer 1

既然使用了import plugin，就没必要再引入样式了。

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "style": "true" }]
  ]
}

以下直接使用antd组件就可以了，不要再引入样式了。

import { Table, Button } from 'antd'; 

Answer 2

我也遇到这个问题，用的是react-create-app脚手架，然后用npm run eject命令将所有内建的配置暴露出来,然后再安装antd，就发生这个问题。查阅文档：

你也可以使用 create-react-app 提供的 yarn run eject 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。

所以如果你用的是react-create-app脚手架，安装好后不用eject命令，再按照antd的文档说明做一遍就可以了