React-Big-Calendar CSS 或 SASS 或两者兼而有之？

问题描述

我有一个 create-react-app，我正在添加 RBC。我有基本的日历设置并使用简单的 CSS（我从 node_module 文件夹中获取了 CSS 文件，然后移到了组件文件夹）。基本日历就在那里，但它真的很基本。

我的问题是：我注意到 node_module 中有一个 SASS 文件夹。 我应该以某种方式使用它吗？如果是这样，我该如何开始？我以前没用过 SASS。

代码如下：

//Packages
import React from "react";
import axios from "axios";
import { Calendar,momentLocalizer } from 'react-big-calendar'
import { Row,Button,Col,Card,CardBody,CardSubtitle } from "reactstrap";
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import moment from 'moment';
//CSS
import 'react-big-calendar/lib/sass/styles';
import "./react-big-calendar.css";
import './dragndrop.css';
import "./schedule.css";

const DnDCalendar = withDragAndDrop(Calendar);
const localizer = momentLocalizer(moment);

//Components

let myEventsList = [
  {
    'title': 'Huddle #2 @ 2pm','allDay': true,'start': new Date(2021,1,5),'end': new Date(2021,5)
  },{
    'title': 'Huddle #2 @ 2pm',12),12)
  },{
    'title': 'Huddle #3 @ 2pm',19),19)
  },26),26)
  },]

class Schedule extends React.Component {

  constructor(props){
    super(props); 
    this.state = { 
      // date: new Date(2021,// width: 1000
    }
  };


  eventSelect = (data) => {
    this.setState({width: 300})
    console.log("Event Drag:" + JSON.stringify(data))
  };

  eventDrag = (data) => {
    console.log("Event Select:" + JSON.stringify(data))
  };

  eventDrop = (data) => {
    console.log("Event Drop:" + JSON.stringify(data))
  };

  eventResize = (data) => {
    console.log("Event Resize: "+JSON.stringify(data))
  };


  componentDidMount(){
  };

  shouldComponentUpdate(props,state) {
  };


  //Render to Dom
  render() {
    return (
      <div className="schedule_container">
        <div className="calendar_container">
          <div className="key_dates">Key Dates:</div> 
          <DnDCalendar 
            className="dnd_calendar"
            style={{ height: '30rem',width: '100%' }}
            step={30}
          
            localizer={localizer}
            events={myEventsList}
            startAccessor="start"
            endAccessor="end"
            view={this.state.view}
            views={['month','week','day']}

            onSelectSlot={(data) => this.eventSelect(data)}
            onEventDrop={(data) => this.eventDrop(data)}
            onEventResize={(data) => this.eventResize(data)}
            onSelectEvent={(data) => this.eventDrag(data)}
          />        
        </div>

        <div className="event_container"> 
          <div className="event_details">Event Details</div>   
          <Card>
            <CardBody>
              This is the card with stuffy stuff
            </CardBody>
          </Card>
        </div>
      </div>
    );
  };
};

export default Schedule;

如您所见，我尝试导入 SASS 文件夹，但我不知道自己在做什么，并且出现错误并且没有任何效果。我也尝试下载 node-sass 模块，但没有任何区别。

任何建议或建议将不胜感激！谢谢！

解决方法

当您安装 node-sass 时，您只需要创建一个包含样式的 scss 文件，并在构建时将其编译为 scss 文件所在路径的 css 文件

您可以在这里阅读更多信息 https://create-react-app.dev/docs/adding-a-sass-stylesheet/

你可以比较 css -> sass like javascript -> typescript sass 为您提供了更多的可能性，例如特定导入、使用变量等等，但最终所有内容都会构建到一个普通的 css 文件中。

因此，对于您的案例和问题，您只需将编译后的 css 文件导入到您的项目中，然后您就可以访问这些样式类。

create-react-app node-sass react-big-calendar sass sass