根據(jù)ant官方的使用方法，我在react里面使用了ant

import { Table, Button } from 'antd';

這樣已經(jīng)能正常使用里面提供的組件了，

但后來我想修改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，就報這個錯

我已經(jīng)安裝了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]',
            },
          },

希望指點