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

【问题标题】：React-Big-Calendar CSS or SASS or both?React-Big-Calendar CSS 或 SASS 或两者兼而有之？
【发布时间】：2021-04-25 18:12:46
【问题描述】：

我有一个 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, 1, 5)
  },
  {
    'title': 'Huddle #2 @ 2pm',
    'start': new Date(2021, 1, 12),
    'end': new Date(2021, 1, 12)
  },
  {
    'title': 'Huddle #3 @ 2pm',
    'start': new Date(2021, 1, 19),
    'end': new Date(2021, 1,19)
  },
  {
    'title': 'Huddle #3 @ 2pm',
    'start': new Date(2021, 1, 26),
    'end': new Date(2021, 1, 26)
  },
]

class Schedule extends React.Component {

  constructor(props){
    super(props); 
    this.state = { 
      // date: new Date(2021, 1, 12),
      // 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模块，但没有任何区别。

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

【问题讨论】：

标签： sass create-react-app node-sass react-big-calendar

【解决方案1】：

当你安装 node-sass 时，你只需要创建一个包含你的样式的 scss 文件，它会在构建时编译成一个 css 文件，与你的 scss 文件所在的路径相同

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

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

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

【讨论】：