Hi! I'm just trying to code a basic landing page for practice.
Project Workflow:
HTML
SASS
PARCEL
Problem: Whenever I'm making changes in my sass file and hot reloading that sass file using parcel. Instantly, I can see the changes on the screen. But the moment I go on my HTML file and hot reload from there then all SASS changes that I made earlier just vanishes.
It's like those changes are not just applicable some how.
I need your help to debug!
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../sass/main.scss">
<script type="module" src="../scripts/index.js"></script>
<title>Home</title>
</head>
<body>
<h1>Own your audience So you don't lose them.</h1>
</body>
</html>
SASS FILE:
h1, h2, h3, h4, h5, h6, p {
font-family: var(--primary-font);
color: var(--color-white);
}
$font-sizes: (
"h1": 11.2rem,
"h2": 7.5rem,
"h3": 4rem,
"h4": 3.5rem,
"h5": 3rem,
"h6": 2.3rem,
);
$line-height: (
"h1": 16.8rem,
"h2": 11.2rem,
"h3": 6rem,
"h4": 5.2rem,
"h5": 4.5rem,
"h6": 3.4rem,
);
$font-weight: (
"h1": 700,
"h2": 500,
"h3": 500,
"h4": 600,
"h5": 500,
"h6": 400,
);
@each $h, $size in $font-sizes {
#{$h} {
font-size: $size;
line-height: map-get($map: $line-height, $key: $h);
font-weight: map-get($map: $font-weight, $key: $h);
}
}
COMPILED CSS:
h1, h2, h3, h4, h5, h6, p {
font-family: var(--primary-font);
color: var(--color-white);
}
h1 {
font-size: 11.2rem;
line-height: 16.8rem;
font-weight: 700;
}
h2 {
font-size: 7.5rem;
line-height: 11.2rem;
font-weight: 500;
}
h3 {
font-size: 4rem;
line-height: 6rem;
font-weight: 500;
}
h4 {
font-size: 3.5rem;
line-height: 5.2rem;
font-weight: 600;
}
h5 {
font-size: 3rem;
line-height: 4.5rem;
font-weight: 500;
}
h6 {
font-size: 2.3rem;
line-height: 3.4rem;
font-weight: 400;
}
COLORS FILE:
$colors: (
"grey": #707070,
"black": #000000,
"blue": #326CF9,
"white": #FFFFFF,
"light-pink": #FE6783,
"light-orange": #FFBF84,
"green": #0FC65C,
);
What I have tried:
I tried deleting the parcel cache and restarting the parcel dev server but It didn't worked!
I inspected the css also. The code is their with all the classes that I wrote in sass perfectly but still found nothing in here.
Submit an article or tip