【求助】react 引入 antd样式之后 只显示部分样式

#1

（经webpack打包）引入antd的css之后出现这种情况：
Input和Button组件样式不全，之后采用按需加载，还是这样。
webpack.config.js

.babelrc

#2

将/node_modules/中的antd.css拿出来，在index.html中引入，就会有样式，有没有大佬知道什么情况？

#3

代码里面怎么import的？

#4

babelrc没用过，我直接webpack.config.js里面这么用的。

{
        test: /\.(js|jsx)$/,
        loader: 'babel',
        query: {
          plugins: [
            ['import', [{ libraryName: "antd", style: true }]],
          ]
        }
      },

希望能帮到你吧。

#5

import ‘antd/dist/antd.css’;

#6

我是说代码里面import Button, 代码里面不需要import css, import Button的时候会自动import进来
like this:

import { Button } from 'antd';
#7

可能 loader 里面没有处理 node_modules 中的 css,
注意看一下有没有 webpack 的出错提示 .

#8

多谢各位的回答！（一开始没讲清楚）我这个组件中要引入antd和自己写的css，而自己写的css是模块化的(import styles from ‘X.css’)，于是webpack.config.js就改成这样：

将antd(非模块化)和自己的css(模块化)分开处理

因为.babelrc中有以下配置，antd的样式就不用手动引入了，而是按需自动引入

问题算是解决了，入坑不久，还有很多要学，很多坑要踩

1 Like
#9

good 。也学习了

#10

我最近遇到了此问题，还没解决，你发的那几个图片显示不出来

#11

楼主的图碎了，能不能发下改后的webpack配置代码，和你遇到了一样的问题，急需

#12

再放一下当时的解决方案

在webpack配置文件中，将自定义css/less样式和antd样式分开处理：

自定义的样式继续模块化

antd样式不做模块化处理

当时把问题解决了就没再思考有没有更好的方案了

1 Like
#13

当时的图(应该吧…)放在楼上了

#14

感谢楼主回复的这么及时~
按你的思路解决了~
针对 antd 的目录单独写一条不开启 css modules

     {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
     },  
     {
          test: /\.less$/,
          exclude:[/node_modules/], //非antd目录开启css modules 
          use:[
            {
              loader: 'style-loader'  
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 2,
                modules: true, 
                sourceMap: true,
                localIdentName: '[local]___[hash:base64:5]'
              } 
            },
            {
              loader: 'less-loader'
            }
          ]
      },
      {
          test: /\.less$/,
          include:[/node_modules/], //antd目录
          use:[
            {
              loader: 'style-loader'  
            },
            {
              loader: 'css-loader'  
            },
            {
              loader: 'less-loader'  
            }
          ]
      },
#15

import ‘antd/dist/antd.css’; // or ‘antd/dist/antd.less’