Question

我正在使用react-dates并尝试实现singledatepicker。所有的功能都在工作，但我不知道为什么所有的默认样式都消失了。我也在使用babel＆＃34; transform-class-properties＆＃34;

import React from 'react';
import moment from 'moment'
import 'react-dates/initialize';
import {SingleDatePicker} from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

const now= moment();
export default class ExpenseForm extends React.Component{
    state={
        description:'',
        note:'',
        amount:'',
        createdAt:moment(),
        calendarFocused:false
    }

    onDateChange = (createdAt)=>{
        this.setState(()=>({createdAt}));
    }
    onFocusChange =({focused})=>{
        this.setState(()=>({calendarFocused:focused}))
    }
    render(){
        return(
            <div>
                <h3>ExpenseForm</h3>
                <form>
                    <SingleDatePicker
                        date={this.state.createdAt}
                        onDateChange={this.onDateChange}
                        focused={this.state.calendarFocused}
                        onFocusChange={this.onFocusChange}
                    />
                </form>
            </div>
        )
    }
}

这是我的Webpack配置文件，它加载了css-loader

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },{
          test: /\.s?css$/,
          use:['style-loader','css-loader','sass-loader']
      }
    ]
},
devtool:'cheap-module-eval-source-map',
devServer:{
  contentBase:path.resolve(__dirname, 'public'),
  historyApiFallback:true
}
};

Answer 1

当将react-dates集成到我的项目中时，我遇到了完全相同的问题，我相信根本原因是项目中的css模块还编译了react-dates的css，这导致样式的丢失。要解决此问题，您可以在模块中修改规则，例如：

...your original css module rule
exclude: [
  /node_modules/
]

应用此规则后，您可能会遇到另一个问题，即这些css文件由于被排除而无法正确处理，然后应添加另一个css模块来处理那些不想弄乱的css文件例如：

exports.vendorCss = {
  test:    /\.(css|scss|sass)$/,
  include: [/node_modules/],
  loaders: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'sass-loader',
    },
  ],
};

就在那里！希望这会有所帮助！

React-Date＆＃34; SingleDatePicker＆＃34;没有按预期工作？

1 个答案: