Errors when importing antd.less using less-loader

[Coodool]

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?

[Coodool]

@afc163 Exactly. When I rollback to less@2.7.1. Everything goes well.

Thanks for your early reply in such a off-duty time. It really bothers me some of days.

[afc163]

It is more like a less@3 issue.

[Coodool]

BTW, importing antd.less will import all the components' style files, which will naturally lead a big size of buddle. The scheme using babel-plugin-import can avoid that.

[afc163]

I will keep this open for people who run into same problem until next less alpha version fix it.

[javaLuo]

我也遇到了同样的问题
难道只能使用less@2.7.2了？
I have the same problem
Can I use less@2.7.2 only?

[Coodool]

@javaLuo It's a bug of less@3.0.0-alpha.3. For more informations, see less issues#3113.

As for your question, I have give a solution as there-in-before. You could add a babel-plugin-import dependancy to your project with proper configuration. This scheme performs better than importing antd.less directly in consideration of bundle size.

目前还是less@3.0.0-alpha.3的一个bug，关于less那边讨论与反馈可以移步这里less issues#3113.

至于你的问题，我在上文已经给出过一个解决方案了，可以通过给项目添加babel-plugin-import依赖并做适当配置。这个方案比直接引入antd.less性能上更好，因为这会显著减小打包后js文件的体积。

[javaLuo]

@Coodool Thanks!

[taviroquai]

Using CRA, after ejecting, and configuring babel-plugin-import in the babel-loader, and adding the less-loader, I got the same problem. I really need to override less variables. Using "style": "css" option is not solution for me :(

[blkdr]

Got it working. Thanks @afc163 & @Coodool.

Cheers.

[jhchill666]

same here as @taviroquai. Seems that employing the babel-plugin-import plugin, with style: true is incompatible with overriding less style declarations, when simply 'importing' the main antd.less file BEFORE the overrides file.

I still see:

index.js:4 You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

in my console. :|

[antoniopresto]

rollback to less@2.7.1 solved for me - using with create-react-app

[ram-mar]

Faced the same problem, this little guy stumped me for an entire night. Unfortunately for me, I discovered this thread after fixing the issue myself. It would be really helpful if you guys could add this as a tip in "Customize Theme" section of the docs, just until less team fixes this issue.

[wavelynn]

when i use create-react-app with antd, and use yarn run eject, config less, with same problem.

@import './node_modules/antd/es/button/style/index.less
^@import './mixin'

rollback less to 2.7.2, it's ok. thanks @afc163

[Obooman]

Rollback less to 2.7.2, works for me too, crash into this with an ejected create-react-app project.
This version-related issue should be figured out in the official document.

[klh]

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

[ojab]

Will it be backported to 2.x branch?

[matthew-dean]

Note that the preferred solution in Less is to use plugins - See @plugin documentation at http://lesscss.org/features/#plugin-atrules-feature

[Tymek]

What fixed my ejected, reconfigured create-react-app:

1. downgrade less (I have "less": "^2.7.1",)
2. add '.less' to resolve.extensions
3. if you have file-loader in your configuration add /\.less$/ to exclude

[matthew-dean]

Is this still an issue with Less v3.5.0-beta? (npm install less@beta)

[matthew-dean]

Alternatively, is this an issue with the option javascriptEnabled: true (which is required for this library)?

[matthew-dean]

@Obooman

This version-related issue should be figured out in the official document.

Ideally, we would resolve this on the Less side. But it may just be a configuration issue (javascriptEnabled: true in Less options)?

[Tymek]

@matthew-dean Both ^3.0.0 and 3.5.0-beta work with javascriptEnabled: true. Thank you

[matthew-dean]

@Tymek Great! That would be the preferred approach vs. downgrading. But if the Less team can help in other ways, or if ant-design needs help converting this to @plugin, you can reach out or try posting a question to Stack Overflow.

[LeeRayno]

use case-sensitive-paths-webpack-plugin to resolve this problem

// webpack.config.js
...
plugins: [
    new CaseSensitivePathsPlugin(),
        ...
 ]

[aertmann]

Had this issue on windows setups only, was due to the less-loader rule having a "include" option configured that didn't work the same way on windows. Hope that helps someone else from going down the rabbit hole with other suggested solutions that don't help.