我最近在练习 React，所以通过 react-create-app 创建了一个简单的应用程序，并且没有编辑任何配置。
我想做的只是渲染 fullcalendar，因此安装了来自 fullcalendar 文档的推荐依赖项。
它呈现组件但没有它的样式我导入了一个 scss 文件并在这个 scss 文件中导入样式表这样
@import '~@fullcalendar/core/min.css'; 就像文档所说的那样。
但它不起作用，我在浏览器开发工具中看不到样式。
这是 scss 文件的输出:
exports = module.exports = require("../../node_modules/css-loader/dist/runtime/api.js")(false);
// Imports
exports.i(require("-!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!../../node_modules/postcss-loader/src/index.js??postcss!../../node_modules/resolve-url-loader/index.js??ref--6-oneOf-5-3!@fullcalendar/core/main.css"), "");
exports.i(require("-!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!../../node_modules/postcss-loader/src/index.js??postcss!../../node_modules/resolve-url-loader/index.js??ref--6-oneOf-5-3!@fullcalendar/daygrid/main.css"), "");
// Module
exports.push([module.id, "\n", ""]);
还有我的 scss:
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
当我导入不带文件扩展名的样式表时，就像 main 一样，它在浏览器开发工具中显示了这样的样式，但它也不起作用。
exports = module.exports = require("../../node_modules/css-loader/dist/runtime/api.js")(false);
// Module
exports.push([module.id, "@charset \"UTF-8\";\n.fc {\n direction: ltr;\n text-align: left; }\n\n.fc-rtl {\n text-align: right; }\n\nbody .fc {\n /* extra precedence to overcome jqui */\n font-size: 1em; }\n\n/* Colors\n--------------------------------------------------------------------------------------------------*/\n.fc-highlight {\n /* when user is selecting cells */\n background: #bce8f1;\n opacity: 0.3; }\n\n.fc-bgevent {\n /* default look for background events */\n background: #8fdf82;\n opacity: 0.3; }\n\n.fc-nonbusiness {\n /* default look for non-business-hours areas */\n /* will inherit .fc-bgevent's styles */\n background: #d7d7d7; }\n\n/* Popover\n--------------------------------------------------------------------------------------------------*/\n.fc-popover {\n position: absolute;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }\n\n.fc-popover .fc-header {\n /* TODO: be more consistent with fc-head/fc-body */\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: 2px 4px; }\n\n.fc-rtl .fc-popover .fc-header {\n flex-direction: row-reverse; }\n\n.fc-popover .fc-header .fc-title {\n margin: 0 2px; }\n\n.fc-popover .fc-header .fc-close {\n cursor: pointer;\n opacity: 0.65;\n font-size: 1.1em; }\n\n/* Misc Reusable Components\n--------------------------------------------------------------------------------------------------*/\n.fc-divider {\n border-style: solid;\n border-width: 1px; }\n\nhr.fc-divider {\n height: 0;\n margin: 0;\n padding: 0 0 2px;\n /* height is unreliable across browsers, so use padding */\n border-width: 1px 0; }\n\n.fc-bg,\n.fc-bgevent-skeleton,\n.fc-highlight-skeleton,\n.fc-mirror-skeleton {\n /* these element should always cling to top-left/right corners */\n position: absolute;\n top: 0;\n left: 0;\n right: 0; }\n\n.fc-bg {\n bottom: 0;\n /* strech bg to bottom edge */ }\n\n.fc-bg table {\n height: 100%;\n /* strech bg to bottom edge */ }\n\n/* Tables\n--------------------------------------------------------------------------------------------------*/\n.fc table {\n width: 100%;\n box-sizing: border-box;\n /* fix scrollbar issue in firefox */\n table-layout: fixed;\n border-collapse: collapse;\n border-spacing: 0;\n font-size: 1em;\n /* normalize cross-browser */ }\n\n.fc th {\n text-align: center; }\n\n.fc th,\n.fc td {\n border-style: solid;\n border-width: 1px;\n padding: 0;\n vertical-align: top; }\n\n.fc td.fc-today {\n border-style: double;\n /* overcome neighboring borders */ }\n\n/* Internal Nav Links\n--------------------------------------------------------------------------------------------------*/\na[data-goto] {\n cursor: pointer; }\n\na[data-goto]:hover {\n text-decoration: underline; }\n\n/* Fake Table Rows\n--------------------------------------------------------------------------------------------------*/\n.fc .fc-row {\n /* extra precedence to overcome themes forcing a 1px border */\n /* no visible border by default. but make available if need be (scrollbar width compensation) */\n border-style: solid;\n border-width: 0; }\n\n.fc-row table {\n /* don't put left/right border on anything within a fake row.\n the outer tbody will worry about this */\n border-left: 0 hidden transparent;\n border-right: 0 hidden transparent;\n /* no bottom borders on rows */\n border-bottom: 0 hidden transparent; }\n\n.fc-row:first-child table {\n border-top: 0 hidden transparent;\n /* no top border on first row */ }\n\n/* Day Row (used within the header and the DayGrid)\n--------------------------------------------------------------------------------------------------*/\n.fc-row {\n position: relative; }\n\n.fc-row .fc-bg {\n z-index: 1; }\n\n/* highlighting cells & background event skeleton */\n.fc-row .fc-bgevent-skeleton,\n.fc-row .fc-highlight-skeleton {\n bottom: 0;\n /* stretch skeleton to bottom of row */ }\n\n.fc-row .fc-bgevent-skeleton table,\n.fc-row .fc-highlight-skeleton table {\n height: 100%;\n /* stretch skeleton to bottom of row */ }\n\n.fc-row .fc-highlight-skeleton td,\n.fc-row .fc-bgevent-skeleton td {\n border-color: transparent; }\n\n.fc-row .fc-bgevent-skeleton {\n z-index: 2; }\n\n.fc-row .fc-highlight-skeleton {\n z-index: 3; }\n\n/*\nrow content (which contains day/week numbers and events) as well as \"mirror\" (which contains\ntemporary rendered events).\n*/\n.fc-row .fc-content-skeleton {\n position: relative;\n z-index: 4;\n padding-bottom: 2px;\n /* matches the space above the events */ }\n\n.fc-row .fc-mirror-skeleton {\n z-index: 5; }\n\n.fc .fc-row .fc-content-skeleton table,\n.fc .fc-row .fc-content-skeleton td,\n.fc .fc-row .fc-mirror-skeleton td {\n /* see-through to the background below */\n /* extra precedence to prevent theme-provided backgrounds */\n background: none;\n /* in case <td>s are globally styled */\n border-color: transparent; }\n\n.fc-row .fc-content-skeleton td,\n.fc-row .fc-mirror-skeleton td {\n /* don't put a border between events and/or the day number */\n border-bottom: 0; }\n\n.fc-row .fc-content-skeleton tbody td,\n.fc-row .fc-mirror-skeleton tbody td {\n /* don't put a border between event cells */\n border-top: 0; }\n\n/* Scrolling Container\n--------------------------------------------------------------------------------------------------*/\n.fc-scroller {\n -webkit-overflow-scrolling: touch; }\n\n/* TODO: move to timegrid/daygrid */\n.fc-scroller > .fc-day-grid,\n.fc-scroller > .fc-time-grid {\n position: relative;\n /* re-scope all positions */\n width: 100%;\n /* hack to force re-sizing this inner element when scrollbars appear/disappear */ }\n\n/* Global Event Styles\n--------------------------------------------------------------------------------------------------*/\n.fc-event {\n position: relative;\n /* for resize handle and other inner positioning */\n display: block;\n /* make the <a> tag block */\n font-size: 0.85em;\n line-height: 1.4;\n border-radius: 3px;\n border: 1px solid #3788d8; }\n\n.fc-event,\n.fc-event-dot {\n background-color: #3788d8;\n /* default BACKGROUND color */ }\n\n.fc-event,\n.fc-event:hover {\n color: #fff;\n /* default TEXT color */\n text-decoration: none;\n /* if <a> has an href */ }\n\n.fc-event[href],\n.fc-event.fc-draggable {\n cursor: pointer;\n /* give events with links and draggable events a hand mouse pointer */ }\n\n.fc-not-allowed,\n.fc-not-allowed .fc-event {\n /* to override an event's custom cursor */\n cursor: not-allowed; }\n\n.fc-event .fc-content {\n position: relative;\n z-index: 2; }\n\n/* resizer (cursor AND touch devices) */\n.fc-event .fc-resizer {\n position: absolute;\n z-index: 4; }\n\n/* resizer (touch devices) */\n.fc-event .fc-resizer {\n display: none; }\n\n.fc-event.fc-allow-mouse-resize .fc-resizer,\n.fc-event.fc-selected .fc-resizer {\n /* only show when hovering or selected (with touch) */\n display: block; }\n\n/* hit area */\n.fc-event.fc-selected .fc-resizer:before {\n /* 40x40 touch area */\n content: \"\";\n position: absolute;\n z-index: 9999;\n /* user of this util can scope within a lower z-index */\n top: 50%;\n left: 50%;\n width: 40px;\n height: 40px;\n margin-left: -20px;\n margin-top: -20px; }\n\n/* Event Selection (only for touch devices)\n--------------------------------------------------------------------------------------------------*/\n.fc-event.fc-selected {\n z-index: 9999 !important;\n /* overcomes inline z-index */\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }\n\n.fc-event.fc-selected:after {\n content: \"\";\n position: absolute;\n z-index: 1;\n /* same z-index as fc-bg, behind text */\n /* overcome the borders */\n top: -1px;\n right: -1px;\n bottom: -1px;\n left: -1px;\n /* darkening effect */\n background: #000;\n opacity: 0.25; }\n\n/* Event Dragging\n--------------------------------------------------------------------------------------------------*/\n.fc-event.fc-dragging.fc-selected {\n box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3); }\n\n.fc-event.fc-dragging:not(.fc-selected) {\n opacity: 0.75; }\n\n/* Horizontal Events\n--------------------------------------------------------------------------------------------------*/\n/* bigger touch area when selected */\n.fc-h-event.fc-selected:before {\n content: \"\";\n position: absolute;\n z-index: 3;\n /* below resizers */\n top: -10px;\n bottom: -10px;\n left: 0;\n right: 0; }\n\n/* events that are continuing to/from another week. kill rounded corners and butt up against edge */\n.fc-ltr .fc-h-event.fc-not-start,\n.fc-rtl .fc-h-event.fc-not-end {\n margin-left: 0;\n border-left-width: 0;\n padding-left: 1px;\n /* replace the border with padding */\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n\n.fc-ltr .fc-h-event.fc-not-end,\n.fc-rtl .fc-h-event.fc-not-start {\n margin-right: 0;\n border-right-width: 0;\n padding-right: 1px;\n /* replace the border with padding */\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n\n/* resizer (cursor AND touch devices) */\n/* left resizer */\n.fc-ltr .fc-h-event .fc-start-resizer,\n.fc-rtl .fc-h-event .fc-end-resizer {\n cursor: w-resize;\n left: -1px;\n /* overcome border */ }\n\n/* right resizer */\n.fc-ltr .fc-h-event .fc-end-resizer,\n.fc-rtl .fc-h-event .fc-start-resizer {\n cursor: e-resize;\n right: -1px;\n /* overcome border */ }\n\n/* resizer (mouse devices) */\n.fc-h-event.fc-allow-mouse-resize .fc-resizer {\n width: 7px;\n top: -1px;\n /* overcome top border */\n bottom: -1px;\n /* overcome bottom border */ }\n\n/* resizer (touch devices) */\n.fc-h-event.fc-selected .fc-resizer {\n /* 8x8 little dot */\n border-radius: 4px;\n border-width: 1px;\n width: 6px;\n height: 6px;\n border-style: solid;\n border-color: inherit;\n background: #fff;\n /* vertically center */\n top: 50%;\n margin-top: -4px; }\n\n/* left resizer */\n.fc-ltr .fc-h-event.fc-selected .fc-start-resizer,\n.fc-rtl .fc-h-event.fc-selected .fc-end-resizer {\n margin-left: -4px;\n /* centers the 8x8 dot on the left edge */ }\n\n/* right resizer */\n.fc-ltr .fc-h-event.fc-selected .fc-end-resizer,\n.fc-rtl .fc-h-event.fc-selected .fc-start-resizer {\n margin-right: -4px;\n /* centers the 8x8 dot on the right edge */ }\n\n/* DayGrid events\n----------------------------------------------------------------------------------------------------\nWe use the full \"fc-day-grid-event\" class instead of using descendants because the event won't\nbe a descendant of the grid when it is being dragged.\n*/\n.fc-day-grid-event {\n margin: 1px 2px 0;\n /* spacing between events and edges */\n padding: 0 1px; }\n\ntr:first-child > td > .fc-day-grid-event {\n margin-top: 2px;\n /* a little bit more space before the first event */ }\n\n.fc-mirror-skeleton tr:first-child > td > .fc-day-grid-event {\n margin-top: 0;\n /* except for mirror skeleton */ }\n\n.fc-day-grid-event .fc-content {\n /* force events to be one-line tall */\n white-space: nowrap;\n overflow: hidden; }\n\n.fc-day-grid-event .fc-time {\n font-weight: bold; }\n\n/* resizer (cursor devices) */\n/* left resizer */\n.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,\n.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer {\n margin-left: -2px;\n /* to the day cell's edge */ }\n\n/* right resizer */\n.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,\n.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer {\n margin-right: -2px;\n /* to the day cell's edge */ }\n\n/* Event Limiting\n--------------------------------------------------------------------------------------------------*/\n/* \"more\" link that represents hidden events */\na.fc-more {\n margin: 1px 3px;\n font-size: 0.85em;\n cursor: pointer;\n text-decoration: none; }\n\na.fc-more:hover {\n text-decoration: underline; }\n\n.fc-limited {\n /* rows and cells that are hidden because of a \"more\" link */\n display: none; }\n\n/* popover that appears when \"more\" link is clicked */\n.fc-day-grid .fc-row {\n z-index: 1;\n /* make the \"more\" popover one higher than this */ }\n\n.fc-more-popover {\n z-index: 2;\n width: 220px; }\n\n.fc-more-popover .fc-event-container {\n padding: 10px; }\n\n/* Now Indicator\n--------------------------------------------------------------------------------------------------*/\n.fc-now-indicator {\n position: absolute;\n border: 0 solid red; }\n\n/* Utilities\n--------------------------------------------------------------------------------------------------*/\n.fc-unselectable {\n -webkit-user-select: none;\n user-select: none;\n -webkit-touch-callout: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }\n\n/*\nTODO: more distinction between this file and common.css\n*/\n/* Colors\n--------------------------------------------------------------------------------------------------*/\n.fc-unthemed th,\n.fc-unthemed td,\n.fc-unthemed thead,\n.fc-unthemed tbody,\n.fc-unthemed .fc-divider,\n.fc-unthemed .fc-row,\n.fc-unthemed .fc-content,\n.fc-unthemed .fc-popover,\n.fc-unthemed .fc-list-view,\n.fc-unthemed .fc-list-heading td {\n border-color: #ddd; }\n\n.fc-unthemed .fc-popover {\n background-color: #fff; }\n\n.fc-unthemed .fc-divider,\n.fc-unthemed .fc-popover .fc-header,\n.fc-unthemed .fc-list-heading td {\n background: #eee; }\n\n.fc-unthemed td.fc-today {\n background: #fcf8e3; }\n\n.fc-unthemed .fc-disabled-day {\n background: #d7d7d7;\n opacity: 0.3; }\n\n/* Icons\n--------------------------------------------------------------------------------------------------\nfrom https://feathericons.com/ and built with IcoMoon\n*/\n@font-face {\n font-family: \"fcicons\";\n src: url(\"data:application/x-font-ttf;charset=utf-8;base64,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\") format(\"truetype\");\n font-weight: normal;\n font-style: normal; }\n\n.fc-icon {\n /* use !important to prevent issues with browser extensions that change fonts */\n font-family: \"fcicons\" !important;\n speak: none;\n font-style: normal;\n font-weight: normal;\n font-feature-settings: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n /* Better Font Rendering =========== */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale; }\n\n.fc-icon-chevron-left:before {\n content: \"\"; }\n\n.fc-icon-chevron-right:before {\n content: \"\"; }\n\n.fc-icon-chevrons-left:before {\n content: \"\"; }\n\n.fc-icon-chevrons-right:before {\n content: \"\"; }\n\n.fc-icon-minus-square:before {\n content: \"\"; }\n\n.fc-icon-plus-square:before {\n content: \"\"; }\n\n.fc-icon-x:before {\n content: \"\"; }\n\n.fc-icon {\n display: inline-block;\n width: 1em;\n height: 1em;\n text-align: center; }\n\n/* Buttons\n--------------------------------------------------------------------------------------------------\nLots taken from Flatly (MIT): https://bootswatch.com/4/flatly/bootstrap.css\n*/\n/* reset */\n.fc-button {\n border-radius: 0;\n overflow: visible;\n text-transform: none;\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit; }\n\n.fc-button:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color; }\n\n.fc-button {\n -webkit-appearance: button; }\n\n.fc-button:not(:disabled) {\n cursor: pointer; }\n\n.fc-button::-moz-focus-inner {\n padding: 0;\n border-style: none; }\n\n/* theme */\n.fc-button {\n display: inline-block;\n font-weight: 400;\n color: #212529;\n text-align: center;\n vertical-align: middle;\n -webkit-user-select: none;\n user-select: none;\n background-color: transparent;\n border: 1px solid transparent;\n padding: 0.4em 0.65em;\n font-size: 1em;\n line-height: 1.5;\n border-radius: 0.25em; }\n\n.fc-button:hover {\n color: #212529;\n text-decoration: none; }\n\n.fc-button:focus {\n outline: 0;\n box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25); }\n\n.fc-button:disabled {\n opacity: 0.65; }\n\n/* \"primary\" coloring */\n.fc-button-primary {\n color: #fff;\n background-color: #2C3E50;\n border-color: #2C3E50; }\n\n.fc-button-primary:hover {\n color: #fff;\n background-color: #1e2b37;\n border-color: #1a252f; }\n\n.fc-button-primary:focus {\n box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5); }\n\n.fc-button-primary:disabled {\n color: #fff;\n background-color: #2C3E50;\n border-color: #2C3E50; }\n\n.fc-button-primary:not(:disabled):active,\n.fc-button-primary:not(:disabled).fc-button-active {\n color: #fff;\n background-color: #1a252f;\n border-color: #151e27; }\n\n.fc-button-primary:not(:disabled):active:focus,\n.fc-button-primary:not(:disabled).fc-button-active:focus {\n box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5); }\n\n/* icons within buttons */\n.fc-button .fc-icon {\n vertical-align: middle;\n font-size: 1.5em; }\n\n/* Buttons Groups\n--------------------------------------------------------------------------------------------------*/\n.fc-button-group {\n position: relative;\n display: inline-flex;\n vertical-align: middle; }\n\n.fc-button-group > .fc-button {\n position: relative;\n flex: 1 1 auto; }\n\n.fc-button-group > .fc-button:hover {\n z-index: 1; }\n\n.fc-button-group > .fc-button:focus,\n.fc-button-group > .fc-button:active,\n.fc-button-group > .fc-button.fc-button-active {\n z-index: 1; }\n\n.fc-button-group > .fc-button:not(:first-child) {\n margin-left: -1px; }\n\n.fc-button-group > .fc-button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n\n.fc-button-group > .fc-button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n\n/* Popover\n--------------------------------------------------------------------------------------------------*/\n.fc-unthemed .fc-popover {\n border-width: 1px;\n border-style: solid; }\n\n/* List View\n--------------------------------------------------------------------------------------------------*/\n.fc-unthemed .fc-list-item:hover td {\n background-color: #f5f5f5; }\n\n/* Toolbar\n--------------------------------------------------------------------------------------------------*/\n.fc-toolbar {\n display: flex;\n justify-content: space-between;\n align-items: center; }\n\n.fc-toolbar.fc-header-toolbar {\n margin-bottom: 1.5em; }\n\n.fc-toolbar.fc-footer-toolbar {\n margin-top: 1.5em; }\n\n/* inner content */\n.fc-toolbar > * > :not(:first-child) {\n margin-left: 0.75em; }\n\n.fc-toolbar h2 {\n font-size: 1.75em;\n margin: 0; }\n\n/* View Structure\n--------------------------------------------------------------------------------------------------*/\n.fc-view-container {\n position: relative; }\n\n/* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */\n/* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */\n.fc-view-container *,\n.fc-view-container *:before,\n.fc-view-container *:after {\n box-sizing: content-box; }\n\n.fc-view,\n.fc-view > table {\n /* so dragged elements can be above the view's main element */\n position: relative;\n z-index: 1; }\n\n@media print {\n .fc {\n max-width: 100% !important; }\n /* Global Event Restyling\n --------------------------------------------------------------------------------------------------*/\n .fc-event {\n background: #fff !important;\n color: #000 !important;\n page-break-inside: avoid; }\n .fc-event .fc-resizer {\n display: none; }\n /* Table & Day-Row Restyling\n --------------------------------------------------------------------------------------------------*/\n .fc th,\n .fc td,\n .fc hr,\n .fc thead,\n .fc tbody,\n .fc-row {\n border-color: #ccc !important;\n background: #fff !important; }\n /* kill the overlaid, absolutely-positioned components */\n /* common... */\n .fc-bg,\n .fc-bgevent-skeleton,\n .fc-highlight-skeleton,\n .fc-mirror-skeleton,\n .fc-bgevent-container,\n .fc-business-container,\n .fc-highlight-container,\n .fc-mirror-container {\n display: none; }\n /* don't force a min-height on rows (for DayGrid) */\n .fc tbody .fc-row {\n height: auto !important;\n /* undo height that JS set in distributeHeight */\n min-height: 0 !important;\n /* undo the min-height from each view's specific stylesheet */ }\n .fc tbody .fc-row .fc-content-skeleton {\n position: static;\n /* undo .fc-rigid */\n padding-bottom: 0 !important;\n /* use a more border-friendly method for this... */ }\n .fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td {\n /* only works in newer browsers */\n padding-bottom: 1em;\n /* ...gives space within the skeleton. also ensures min height in a way */ }\n .fc tbody .fc-row .fc-content-skeleton table {\n /* provides a min-height for the row, but only effective for IE, which exaggerates this value,\n making it look more like 3em. for other browers, it will already be this tall */\n height: 1em; }\n /* Undo month-view event limiting. Display all events and hide the \"more\" links\n --------------------------------------------------------------------------------------------------*/\n .fc-more-cell,\n .fc-more {\n display: none !important; }\n .fc tr.fc-limited {\n display: table-row !important; }\n .fc td.fc-limited {\n display: table-cell !important; }\n .fc-popover {\n display: none;\n /* never display the \"more..\" popover in print mode */ }\n /* TimeGrid Restyling\n --------------------------------------------------------------------------------------------------*/\n /* undo the min-height 100% trick used to fill the container's height */\n .fc-time-grid {\n min-height: 0 !important; }\n /* don't display the side axis at all (\"all-day\" and time cells) */\n .fc-timeGrid-view .fc-axis {\n display: none; }\n /* don't display the horizontal lines */\n .fc-slats,\n .fc-time-grid hr {\n /* this hr is used when height is underused and needs to be filled */\n display: none !important;\n /* important overrides inline declaration */ }\n /* let the container that holds the events be naturally positioned and create real height */\n .fc-time-grid .fc-content-skeleton {\n position: static; }\n /* in case there are no events, we still want some height */\n .fc-time-grid .fc-content-skeleton table {\n height: 4em; }\n /* kill the horizontal spacing made by the event container. event margins will be done below */\n .fc-time-grid .fc-event-container {\n margin: 0 !important; }\n /* TimeGrid *Event* Restyling\n --------------------------------------------------------------------------------------------------*/\n /* naturally position events, vertically stacking them */\n .fc-time-grid .fc-event {\n position: static !important;\n margin: 3px 2px !important; }\n /* for events that continue to a future day, give the bottom border back */\n .fc-time-grid .fc-event.fc-not-end {\n border-bottom-width: 1px !important; }\n /* indicate the event continues via \"...\" text */\n .fc-time-grid .fc-event.fc-not-end:after {\n content: \"...\"; }\n /* for events that are continuations from previous days, give the top border back */\n .fc-time-grid .fc-event.fc-not-start {\n border-top-width: 1px !important; }\n /* indicate the event is a continuation via \"...\" text */\n .fc-time-grid .fc-event.fc-not-start:before {\n content: \"...\"; }\n /* time */\n /* undo a previous declaration and let the time text span to a second line */\n .fc-time-grid .fc-event .fc-time {\n white-space: normal !important; }\n /* hide the the time that is normally displayed... */\n .fc-time-grid .fc-event .fc-time span {\n display: none; }\n /* ...replace it with a more verbose version (includes AM/PM) stored in an html attribute */\n .fc-time-grid .fc-event .fc-time:after {\n content: attr(data-full); }\n /* Vertical Scroller & Containers\n --------------------------------------------------------------------------------------------------*/\n /* kill the scrollbars and allow natural height */\n .fc-scroller,\n .fc-day-grid-container,\n .fc-time-grid-container {\n /* */\n overflow: visible !important;\n height: auto !important; }\n /* kill the horizontal border/padding used to compensate for scrollbars */\n .fc-row {\n border: 0 !important;\n margin: 0 !important; }\n /* Button Controls\n --------------------------------------------------------------------------------------------------*/\n .fc-button-group,\n .fc button {\n display: none;\n /* don't display any button-related controls */ } }\n\n/* DayGridView\n--------------------------------------------------------------------------------------------------*/\n/* day row structure */\n.fc-dayGridWeek-view .fc-content-skeleton,\n.fc-dayGridDay-view .fc-content-skeleton {\n /* there may be week numbers in these views, so no
感谢阅读...
---编辑---
我修好了，不是配置的问题，是我的错...
我的 app.js 中的 header 标记内有代码替换了整个代码，这就是我无法加载任何样式表的原因。
最佳答案
首先 rm-rf ./node_modules package-log.json
第二个 npm I
第三个 npm i -D node-sass
一旦一切正常，从@imports 中移除~
再次运行，如果你使用的是 Mac，我在导入 scss | 时经常遇到问题。 css 飞到那里因为我必须从 node_modules 开始他的路径例如如果我想导入 normalize.scss 我喜欢 @import “node_modules/normalize.scss/normalize.scss”
还有一点是，如果我尝试将 css 文件导入到 scss 文件中，我会收到一个错误，这就是为什么我更喜欢将我的 css 文件导入到应用程序的 index.jsx 中
关于javascript - React newb 不知道我是否正确导入样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59297267/