react.js - antd design样式无效

问题描述

问 题

import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'antd';
import 'antd/lib/date-picker/style/css';

export default class Index extends React.Component {
  render() {
    return (
     <div>
       <DatePicker />
     </div>
    )
  }
}

配置如下 webpack.config.js

 module: {
        loaders: [
            {test: /\.css$/, loader: ExtractTextPlugin.extract("css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]")},
            {test: /\.(js|js\.gz)$/, loaders: ['babel'], include: [path.join(__dirname, 'src'),]},
            {test: /\.(png|jpg)$/, loader: "url-loader?limit=5000"},
        ]
    }

要怎么改？ 请指教。。。 谢谢

解决方案

webpack可以这样配置：

{
    test: /\.css$/,
    loader: "style!css?module&localIdentName=[hash:base64:5]&-url"
}

{
  test: /\.less?$/,
  loaders: [
             'style-loader',
             'css-loader',
             'less-loader?{"sourceMap":true}'
           ],
}

使用antd组件时，不需要在js文件里重新import antd的样式文件了，以上面的webpack配置，如果你需要使用自定义的css文件，你需要用className={style.xxx}来引用，如果是自定义的less文件，直接使用className="xxx"这样就可以了。

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