Skip to content
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 · 26 comments
Closed

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

Coodool opened this issue Oct 10, 2017 · 26 comments
Labels

Comments

@Coodool
Copy link

@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
Copy link
Member

@afc163 afc163 commented Oct 10, 2017

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

@Coodool
Copy link
Author

@Coodool 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
Copy link
Member

@afc163 afc163 commented Oct 10, 2017

It is more like a less@3 issue.

@Coodool
Copy link
Author

@Coodool 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
Copy link
Member

@afc163 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
Copy link

@javaLuo javaLuo commented Oct 11, 2017

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

@Coodool
Copy link
Author

@Coodool 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
Copy link

@javaLuo javaLuo commented Oct 11, 2017

@Coodool Thanks!

@taviroquai
Copy link
Contributor

@taviroquai 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
Copy link
Contributor

@blkdr blkdr commented Oct 19, 2017

Got it working. Thanks @afc163 & @Coodool.

Cheers.

@jhchill666
Copy link

@jhchill666 jhchill666 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
Copy link

@antoniopresto antoniopresto commented Feb 14, 2018

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

@ram-mar
Copy link

@ram-mar 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
Copy link

@wavelynn 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
Copy link

@Obooman 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
Copy link

@klh 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
Copy link

@ojab ojab commented Mar 9, 2018

Will it be backported to 2.x branch?

@matthew-dean
Copy link

@matthew-dean 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
Copy link

@Tymek 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
Copy link

@matthew-dean matthew-dean commented Jun 25, 2018

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

@matthew-dean
Copy link

@matthew-dean matthew-dean commented Jun 25, 2018

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

@matthew-dean
Copy link

@matthew-dean 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
Copy link

@Tymek Tymek commented Jun 25, 2018

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

@matthew-dean
Copy link

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

@LeeRayno
Copy link

@LeeRayno LeeRayno commented Nov 21, 2019

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

// webpack.config.js
...
plugins: [
    new CaseSensitivePathsPlugin(),
        ...
 ]
@aertmann
Copy link
Contributor

@aertmann aertmann commented Nov 25, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet