In my current project for an online course, I am utilizing sass to style everything. The compilation process completes successfully without any errors, but unfortunately, the browser does not display any of the styles.
The styles folder contains five files:
base.scss
footer.scss
form.scss
header.scss
resets.scss
After running
npm run build-dev
all files compile properly. While inspecting the main.js file, I can see the content of resets.scss being loaded correctly:
[content of resets.scss]
However, despite this, I do not observe any styles applied in the browser. Here is a glimpse of the configuration file:
webpack.dev.js:
[webpack configuration details]
This code snippet shows my index.js file where resets.scss is imported along with some additional scripts:
[index.js file content]
and my index.html file which has links to all the necessary stylesheets:
[index.html file content]
I have attempted renaming .scss to .css and also consolidated the CSS calls into one script tag, but the issue persists. Additionally, here's a segment from the resets.scss file:
[resets.scss content]
Following that, I've included part of the header.scss for reference:
header.scss:
[header.scss content]
Despite defining the flexbox property in header, it doesn't seem to be reflecting in the browser preview. Could the incomplete provided code in the lesson materials be causing this discrepancy during compilation?
Looking forward to any guidance or suggestions on how to resolve this situation effectively.
Thank you, Mike