Раньше это работало, но я не могу точно определить, где источник проблемы.
Я импортирую папку styles.css с index.js. Я поменял местами JS-код, проблема возникла, и, потерпев неудачу, я вернул свой код обратно в прежнее состояние. Но по какой-то причине проблема все еще сохраняется.
Мне было интересно, конфликтуют ли некоторые из моих зависимостей с другими, но теперь, когда я отключил большинство из них, я не думаю, что они связаны с неработающим CSS. Я также отсканировал styles.css и, насколько я могу судить, нет пропущенных скобок или ошибок.
Когда я компилирую свой код через веб-пакет и загружаю его в SharePoint, CSS загружается, так что есть кое-что о том, с чем я работаю локально.
Есть мысли? Я не могу продолжить свой проект, пока не смогу вернуть CSS. Вот снимок экрана моего браузера и вот JSFiddle моего webpack.config.js.
index.html:
<!DOCTYPE html>
<html lang="eng">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
<title>Training Library</title>
<!-- <link type="text/css" rel="stylesheet" href="./styles.css"> --><!-- due to ./styles.css being imported via index.js I'm not sure if this line is needed -->
</head>
<body>
index.js
import "./styles.css";
// import 'bootstrap/dist/css/bootstrap.min.css';
// import 'jquery-autocomplete/jquery.autocomplete.css';
// import './SiteAssets/plugins/jquery-ui.min.css';
import 'jquery';
// import 'bootstrap/dist/js/bootstrap.bundle.min.js';
// import 'jquery-ui-bundle/jquery-ui.min.js';
// import './SiteAssets/plugins/jquery.autocomplete.js';
// import './SiteAssets/plugins/moment.min.js';
import TopCoursesComponent from './SiteAssets/scripts/topCourses';
import NewCoursesComponent from './SiteAssets/scripts/newCourses';
import AllCoursesComponent from './SiteAssets/scripts/allCourses';
Структура файла:
+ TrainingLib
+ dist
+ node_modules
+ public
- index.html
+ src
+ SiteAssets
+ plugins
+ scripts
- allCourses.js
- newCourses.js
- etc
- index.js
- styles.css
- package.json
- webpack.config.js