Errors when importing antd.less using less-loader

Version

antd @2.13.4 webpack @3.6.0 less @3.0.0 less-loader @4.0.5

Describe

I’m importing antd.less into my antd project built with wepack. Follow the direction of official doc in the Customize Theme. I create a standalone less file and import the antd.less as follows:

@import "~antd/dist/antd.less";

But when I run npm start, an error occurys:

ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/style/main.less
Module build failed:

@import "./themes/default";
^

The first thought in my head is there must be something goes wrong with webpack or less-loader, so I have tried a lot in configuring my webpack.config.js. But that seems doesn’t work.

I try to compile the antd.less directly in the CLI:

lessc ./node_modules/antd/dist/antd.less

Still goes wrong. So I guess it may be an antd issues:

FileError: './themes/default' wasn't found. Tried - D:\Projects\ncslab\node_modules\antd\lib\style\themes\default,D:\Projects\ncslab\node_modules\antd\dist\themes\default,D:\Projects\ncslab\node_modules\themes\default,themes\default.less in D:\Projects\ncslab\node_modules\antd\lib\style\index.less on line 1, column 1:
1 @import "./themes/default";
2 @import "./core/index";

Solution

The way on my searching a solution for the issue, I found another workaround to import antd style in my project, which using babel-plugin-import and add such a config items in the .babelrc file:

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

Thongh it works, I still wonder why the official scheme doesn’t go as expected.

Here is my webpack configuration.

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {

  entry: './src/app.jsx',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  devtool: 'eval-source-map',

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: [path.resolve(__dirname, "src")],
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader','css-loader',"less-loader"]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
};

[afc163]

You mean less@3.0.0-alpha.3? Could you try less@2.7.2?

[klh]

add .less to extensions in your webpack definition config file: extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx', '.less'],