react.js - antd design样式无效

问题描述

问 题

在react中使用antd design，按照官网说明，采用手动引入样式，样式不生效

：

import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'antd';
import 'antd/dist/antd.css';



export default class Index extends React.Component {
  render() {
    return (
     <div>
       <Button type="primary">primary</Button>
       <Button type="ghost">ghost</Button>
       <Button>Default</Button>
     </div>
    )
  }
}

然后使用官网推荐的babel-plugin-import进行按需加载，按照如下配置webpack.config.js

/**
 * Created by zhouhao on 2017/5/4.
 */
var path = require('path');
module.exports = {
  context: __dirname + '/app',
  entry:  "./js/root.js",
  module : {
    loaders : [
      {
        test : /\.js?$/,
        exclude : /(node_modules)/,
        loader : 'babel-loader',
        query : {
          presets : ['react' , 'es2015'],
          plugins: [
            ["import", { libraryName: "antd", style: "css" }] // `style: true` 会加载 less 文件
          ]
        }
      },
      {
        test : /\.css$/,
        loader : 'style-loader!css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]'
        // [path][name]_[local]_[hash:base64:5]也可以
      }
    ]
  },

  output : {
    path : __dirname + '/public/',
    filename : 'bundle.js'
  },
  devServer: {
    inline: true//实时刷新;
  },

};

然后样式仍然无法生效

除非在index.html使用link标签引入css文件，才可以生效，不知道为什么

  <link rel="stylesheet" href="node_modules/antd/dist/antd.min.css" >

使用的各插件版本：

"babel-loader": "^7.0.0",
    "babel-plugin-import": "^1.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^7.3.0",
    "css-loader": "^0.28.1",
    "postcss-loader": "^1.3.3",
    "postcss-modules-values": "^1.2.2",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.1.1",
    "style-loader": "^0.17.0",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
    "antd": "^2.10.0"
  }

有没有同样问题的朋友，请帮忙指点，谢谢！

解决方案

不要在 antd 的 css 上用 css modules。

这篇关于react.js - antd design样式无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！