New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Errors when importing antd.less using less-loader #7850

Closed
Coodool opened this Issue Oct 10, 2017 · 24 comments

Comments

Projects
None yet
@Coodool

Coodool commented Oct 10, 2017

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

This comment has been minimized.

Member

afc163 commented Oct 10, 2017

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

@Coodool

This comment has been minimized.

Coodool commented Oct 10, 2017

@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

This comment has been minimized.

Member

afc163 commented Oct 10, 2017

It is more like a less@3 issue.

@Coodool

This comment has been minimized.

Coodool commented Oct 10, 2017

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

This comment has been minimized.

Member

afc163 commented Oct 10, 2017

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

@javaLuo

This comment has been minimized.

javaLuo commented Oct 11, 2017

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

@Coodool

This comment has been minimized.

Coodool commented Oct 11, 2017

@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

This comment has been minimized.

javaLuo commented Oct 11, 2017

@Coodool Thanks!

@taviroquai

This comment has been minimized.

Contributor

taviroquai commented Oct 17, 2017

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

This comment has been minimized.

Contributor

blkdr commented Oct 19, 2017

Got it working. Thanks @afc163 & @Coodool.

Cheers.

@jamiehill

This comment has been minimized.

jamiehill commented Nov 29, 2017

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

This comment has been minimized.

antoniopresto commented Feb 14, 2018

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

@ram-mar

This comment has been minimized.

ram-mar commented Feb 23, 2018

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

This comment has been minimized.

wavelynn commented Feb 23, 2018

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

This comment has been minimized.

Obooman commented Feb 23, 2018

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

This comment has been minimized.

klh commented Feb 27, 2018

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

@yesmeck yesmeck closed this in 9634bea Feb 28, 2018

@ojab

This comment has been minimized.

ojab commented Mar 9, 2018

Will it be backported to 2.x branch?

yesmeck added a commit that referenced this issue Mar 12, 2018

zheeeng added a commit to zheeeng/ant-design that referenced this issue Apr 12, 2018

@matthew-dean

This comment has been minimized.

matthew-dean commented Jun 2, 2018

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

@Tymek

This comment has been minimized.

Tymek commented Jun 25, 2018

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

This comment has been minimized.

matthew-dean commented Jun 25, 2018

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

@matthew-dean

This comment has been minimized.

matthew-dean commented Jun 25, 2018

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

@matthew-dean

This comment has been minimized.

matthew-dean commented Jun 25, 2018

@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

This comment has been minimized.

Tymek commented Jun 25, 2018

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

@matthew-dean

This comment has been minimized.

matthew-dean commented Jun 25, 2018

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment