[英]css file not updating when I save scss file
I have been having some issues with my css not updating when I save a file.当我保存文件时,我的 css 有一些问题没有更新。 I thought it was a problems with the VSCode live sass compiler at first because the changes only updated if I restarted the compiler but I have just made a change to the main scss file and the change showed instantly.
起初我认为这是 VSCode live sass 编译器的问题,因为更改仅在我重新启动编译器时更新,但我刚刚对主 scss 文件进行了更改,更改立即显示。
I think there may either be an issue with the main file or the header file.我认为主文件或头文件可能有问题。
I know this may be a typo or something i'm not doing right but it has been an issue of days and I can't work it out.我知道这可能是打字错误或我做错的事情,但这已经是几天的问题了,我无法解决。 Any suggestions would be appreciated.
任何建议,将不胜感激。
Main file :主文件:
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
@import "./Header";
header file :头文件:
.header {
height: 8vh;
background-color: #131921;
position: sticky;
top: 0;
z-index: 100;
align-items: center;
display: flex;
color: #fff;
padding: 30px 20px;
background-color: hotpink;
&__logo {
width: 100px;
// object-fit: contain;
margin: 0 20px;
}
&__search {
display: flex;
flex: 1;
align-items: center;
border-radius: 35px;
}
&__searchIcon {
padding: 5px;
height: 36px !important;
width: 36px !important;
background-color: #cd9042;
border-radius: 0 6px 6px 0 !important;
}
&__searchInput {
padding: 10px;
border: none;
width: 100%;
border-radius: 6px 0 0 6px !important;
}
&__nav {
display: flex;
justify-content: space-evenly;
}
&__boxes {
display: flex;
flex-direction: column;
align-items: flex-start;
color: #fff;
margin: 0 10px;
text-transform: capitalize;
text-align: left;
}
&__boxesFirstLine {
font-size: 12px;
line-height: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
}
&__boxesSecondLine {
font-size: 14px;
font-weight: 700;
line-height: 15px;
padding-bottom: 5px;
padding-right: 9px;
}
&__basketText {
color: #fff;
font-size: 14px;
line-height: 15px;
font-weight: 700;
padding-bottom: 5px;
padding-right: 9px;
text-transform: capitalize;
}
}
the header file is called Header.scss.头文件称为 Header.scss。
I don't know what would be preventing updates when the compiler is running but is fine if it is restarted.我不知道什么会在编译器运行时阻止更新,但如果重新启动就可以了。 I have asked the extension devs and asked specifically on here whether it is an issue with the extension but had none responses.
我已经问过扩展开发人员,并在这里专门询问这是否是扩展的问题,但没有任何回应。
I highly recommend parcel.js
to automatically convert on hit save.我强烈推荐
parcel.js
在点击保存时自动转换。 Also parcel.js
so smart about adding packages, converting than any other bundler stuff.此外,
parcel.js
在添加包parcel.js
非常聪明,比任何其他打包工具都进行转换。
"build": "parcel styles/main.scss"
Add this script to the package.json file. "build": "parcel styles/main.scss"
将此脚本添加到 package.json 文件中。 Let the parcel convert for you into realtime when press save.按保存后,让包裹为您实时转换。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.