[英]css file not updating when I save scss file
当我保存文件时,我的 css 有一些问题没有更新。 起初我认为这是 VSCode live sass 编译器的问题,因为更改仅在我重新启动编译器时更新,但我刚刚对主 scss 文件进行了更改,更改立即显示。
我认为主文件或头文件可能有问题。
我知道这可能是打字错误或我做错的事情,但这已经是几天的问题了,我无法解决。 任何建议,将不胜感激。
主文件:
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
@import "./Header";
头文件:
.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;
}
}
头文件称为 Header.scss。
我不知道什么会在编译器运行时阻止更新,但如果重新启动就可以了。 我已经问过扩展开发人员,并在这里专门询问这是否是扩展的问题,但没有任何回应。
我强烈推荐parcel.js
在点击保存时自动转换。 此外, parcel.js
在添加包parcel.js
非常聪明,比任何其他打包工具都进行转换。
"build": "parcel styles/main.scss"
将此脚本添加到 package.json 文件中。 按保存后,让包裹为您实时转换。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.