Currently, I am in the process of learning how to bundle modules together using webpack. However, I have encountered a roadblock along the way. Within my src folder, there is a CSS file named style.css, a JS file named home.js which contains a function, and another JS file named index.js which imports both before appending them to my webpage.
In style.css, I have added a background image to the body that loads successfully. But oddly enough, the styling applied to a specific element (the 'hi' div) does not seem to take effect. Despite the fact that the element's class does appear when inspecting it on the page.
I can't seem to figure out why this isn't working - what am I missing?
Below are all three files for reference:
//index.js:
console.log('hello world');
import square from './home.js';
import './style.css';
const content = document.getElementById('content');
content.appendChild(square());
//home.js:
export default function square() {
const hi = document.createElement('div');
hi.classList.add('black');
hi.textContent = 'boo';
return hi
};
//style.css:
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100wv;
background-image: url('food.jpg');
background-size: cover;
};
.black {
background-color: black;
color: white;
border: 1px solid;
padding: 10px;
}