Solvedant design Webpack css loading

Environment(required)

  • antd version: 2.7.4
  • OS and its version: Xubuntu 16.04
  • Browser and its version: Chromium 55.0.2883.87

What did you do? Please provide steps to re-produce your problem.

Just importing a antd component.
Using babel-plugin-import 1.1.1 with:

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

I use webpack 2 with a css loader as:

test: /\.s?css$/,
        exclude: /node_modules/,
        loaders: ["style-loader", "css-loader?sourceMap", "postcss-loader", "sass-loader?sourceMap&sourceComments"]

If I don't include style: 'css' in babel import, webpack compiles, but ant styles are not loaded in my web application.

What do you expected?

Webpack compile with no problem. Styles are loaded

What happen?

ERROR in ./~/antd/lib/button/style/index.css
Module parse failed: /home/guillaume/Projects/bender-front-new/node_modules/antd/lib/button/style/index.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
17 Answers

✔️Accepted Answer

This issue is resolved for me when i remove part of the recommended .babelrc config for ant-design

Before:

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

After:

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

webpack 3.6
antd 3.2.1

Other Answers:

Just don't exclude node_modules/antd.

I succeeded to make it works with this configuration:

["import", {
       "libraryName": "antd",
       style: true
}]

Installing less-loader and less

Then adding the rule:

{
        test: /\.less$/,
        use: ["style-loader", {loader: 'css-loader', options: {sourceMap: 1}}, "postcss-loader", "less-loader"]
    }

Is another way without having to install less is possible?
Thank you

But。how can i use css module in my own .less and no use in antd.less

you can use test and exclude to match exactly the less files you need

test: /\.less$/,
exclude: /antd.*\.less$/,
use: // something with css modules
test: /antd.*\.less$/,
use: // No css modules

also make sure you have .less in your resolve.extensions and babel-plugin-import setting style: true

Related Issues:

431
ant design How to set 100% of height layout
This works for me: <Layout style={{height:100vh}}> I am a newbie I base on Meteor JS How to set 100%...
413
ant design Each record in table should have a unique key prop,or set rowKey to an unique primary key.
@ahmetkuslular The error message is pretty explicit your data set must contain items with a key prop...
153
ant design 😨 Table align broken when cell contains long number or long word after 3.11.3
超长连续字段(长数字和长单词) 破坏表格布局的问题(即使你指定了列的宽度也会被挤开),之前组件内默认加过 word-break: break-word; 去纠正此类布局,又会引起 #13624 的问题...
119
ant design Can't set form initialValues from state
I had the same problem sometimes the initialValues are empty and I need to fetch the initialValues f...
113
ant design CheckBox with Form was not work
I ran in to similar problem when i was trying to send form with selected checkbox because function v...
93
ant design import the antd theme, webpack build show .bezierEasingMixin error ?
version: antd@2.x less@2.x 是OK的。 less@3.x,需要开启 配置项 javascriptEnabled: true 但依然有错误: ...
81
ant design Check Box Validation not working
Following @yesmeck 's suggestion I came up with the following code which works as well ...
78
ant design Customization of theme is broken with latest version of less-loader
#23603 #23596 less-loader@5 less-loader@6 I have searched the issues of this repository and believe ...
59
ant design 引用国际化包报错
Change to fix this problem The resource provided by the document is wrong. I have searched the issue...
58
ant design Is there any way to disable all animations?
If anyone is wondering how to get rid of this clicked (glow fade-out) animation: Depending on the An...
38
ant design error TS2605 JSX element type Button is not a constructor function for JSX elements
Do you have allowSyntheticDefaultImports: true in tsconfig.json? Hello since this morning I am getti...
29
ant design Type error: Cannot find name 'ResizeObserver'.
The temporary fix is putting following interface to your typings/index.d.ts: I have searched the iss...
27
ant design Flash of unstyled content for first load
There is also a 'flash' of content reflow apparent on https://ant.design/components/layout/ - have a...
23
ant design Select Custom dropdown with dropdownRender property not respond to click
Another perhaps more elegant I have searched the issues of this repository and believe that this is ...
22
ant design Impossible to expand Select component dropdown programatically
@martis347 Propably it's mousedown event now instead of click I have searched the issues of this rep...
22
ant design Errors when importing antd.less using less-loader
You mean less@3.0.0-alpha.3? Could you try less@2.7.2? Version antd @2.13.4 webpack @3.6.0 less @3.0...
19
ant design Typing issues with Typescript 3 and new LibraryManagedAttributes feature
For me the workaround is adding skipLibCheck: true to tsconfig.json https://stackoverflow.com/a/5240...
18
ant design Webpack css loading
This issue is resolved for me when i remove part of the recommended .babelrc config for ant-design B...
18
ant design Menu.Item should have the onClick param
NOTE: Please click the thumb up (👍) rather than '+1' comment Wrapping with <a> works fine but I thi...
17
ant design Integrating with react-boilerplate
I found a workaround but I don't know why yet The dot can't existed in JSX expression for production...
17
ant design Equal height items
Using flexbox-enabled rows with type=flex and setting the height to 100% on the column contents work...
16
ant design useForm > getFieldValue does not work
In addition to this I also noticed that getFieldValue which is supposed to listen to field value cha...
14
ant design Button tsd error in latest typescript@3.4.2
Same here But I bypassed the problem by downgrading @types/react to 16.8.11 I think it breaks in bot...
14
ant design Long list optimization
SuperSelect is based on antd Select which supports a virtual list of tens of thousands of data the s...
13
ant design form demo element id not unique
@zhutiancheng2 给 Form 加个 name 就行了。react-component/form#197 Please add name to different Form: ...
12
ant design Add .focus .blur method for every form control components
@ChuckJonas That's exactly the problem Most of you probably want to really focus and open the rc-sel...
12
ant design Property 'value' does not exist on type 'EventTarget'.
See DefinitelyTyped/DefinitelyTyped#12239 you can try event.currentTarget. Version 2.12.1 Environmen...
12
ant design Table onRow Event multiple triggered
Perfect!!! It works with: Thanks a lot @yesmeck !!! Version 3.1.0 Environment macos 10.12.6 ...
9
ant design Menu.SubMenu SubMenu.js:452 Uncaught TypeError: Illegal invocation
Could you remove node_modules and package-lock.json(or yarn.lock) then try again? ...
5
ant design TS2304: Cannot find name 'PropertyKey'.
Because PropertyKey is in es2015 library so you should included es2015 in the compilation add lib op...
4
ant design How to make nested table show different data in different rows?
What problem does this feature solve? At parent table's rows there are different data in nested tabl...
8
ng zorro antd 9.0.0-beta.2 Fails to compile
Same problem with beta.3 and angular 9.1 but on many more components ng-zorro-antd/* A small extract...
4
ant design pro 🐛[BUG] Login doesn't work properly if /api/currentUser route is protected
I can also confirm that I've been hit by this It's much simpler to reproduce also ...
3
ant design mobile antd-mobile does not contain an export
Same issue occurred when I executed yarn build Version 1.1.3 Environment react (web browsers) Reprod...
8
slider How do I reset values for slider
No your first fiddle is still a uncontrolled component I have a slider as below which uses marks for...
397
material ui Module not found: Can't resolve 'material-ui-icons/Menu' Martial Next
For anyone else experiencing this issue: npm install @material-ui/icons https://www.npmjs.com/packag...
175
storybook Webpack 4 support?
I'm getting the below error when running Storybook with a project using Webpack 4; This is preventin...
116
material ui Working with react-hook-form
I have added the waiting for users upvotes tag I'm closing the issue as we are not sure people are l...
111
material ui @material-ui/styles: Usage in a Class Component?
i used withStyles instead of makeStyle like this... How does one use the makeStyles API within a cla...
111
storybook babelHelpers is not defined using Rollup [Solved]
@alejandronanez you can remove external-helpers from your .babelrc file and enable it back only on y...
107
material ui Unable to install @mui/material-icons last version
I found a solution here : yarnpkg/yarn#4890 (comment) So either install it using yarn add @mui/mater...
100
material ui theme.spacing is not a function with @material-ui/[styles/core] 4.0.1
Sorry I found the problem Trying to fix another issue today I tried to reset my whole Material-UI 4....
97
material ui Convert ListItem compatible with react-router
This is covered in the documentation: https://material-ui.com/components/buttons/#third-party-routin...
80
material ui Can we add new property for color in palette in MuiTheme
@davidcalhoun Yes you are right this issue is about extending the Button implementation so people ca...
79
storybook Storybook doesn't work with the newest version 10.0.1 of PostCSS Autoprefixer plugin
I also get the same issue as @matamatanot (also with tailwind 2.0.2) I might have missed something f...
76
material ui Tooltip issue using Jest: TypeError document.createRange is not a function
@MorganDbs See jsdom/jsdom#317 We use the following patch for our tests: Does it fix your problem? U...
76
material ui [Tabs] Improve TabPanel demos, avoid validateDOMNesting warning
Note: the warning appears only because the demo code has: Changing it like this takes care of it: ...
72
material ui [Table] Fixing head in material
To be noted the header can be sticky positioned: https://codesandbox.io/s/k0vwm7xpl3 ...
67
material ui [TextField] Handle Chrome autofill
Also notice the yellow background for auto filled text can it be overridden? @garygrubb I did this v...
65
storybook Storybook build fails in Node 13 (cannot find module @babel/compat-data/corejs3-shipped-proposals)
Removing node_modules and yarn.lock and using node 13.13 has been helped for me. ...