您好,我在React中工作,我使用antd,但我也做自己的设计。在进行最终编译以将整个文件传递到生产环境时,我遇到了问题,在本地所有样式看起来都很好,但是在生产环境中,css丢失了,如果发生这种情况是因为我正在使用sass,或者是因为我正在制作一个正在使用的库组件的信封,在本例中为antdesign
我在jsx中得到了这个
<div className="selectors-container ${mode === 'Light'} ">
<div className="swap-selectors">
<div className="title">
<h6>From:</h6>
</div>
<div className="selector">
<Select
className="price-card-selector emp "
value={swapCoins.from}
style={{ width: '100%', padding: 0, border: 'none' }}
onChange={e => setswapCoins({ ...swapCoins, from: e })}
>
{options}
</Select>
<input className='input' type='number' value={swapValue.from} onChange={e => handleChangeFrom(e)} />
</div>
</div>
<div className="swap-icon" onClick={swapCointTypes}>
<i className="fas fa-exchange-alt"></i>
</div>
<div className="swap-selectors">
<div className="title">
<h6>To:</h6>
</div>
<div className="selector">
<Select
className="price-card-selector emp"
value={swapCoins.to}
style={{ width: '100%', padding: 0, border: 'none' }}
onChange={e => setswapCoins({ ...swapCoins, to: e })}
>
{options}
</Select>
<input className='input' type="number" value={swapValue.to} onChange={e => handleChangeTo(e)} />
</div>
</div>
</div>
我用这个SASS文件
@import '../../../css/resposiveSize';
@mixin center() {
display: flex;
justify-content: center;
align-items: center;
}
.selectors-container{
display: flex;
justify-content: space-around;
width: 100%;
margin: 20px 0;
@include media ('lg'){
flex-direction: column;
}
.swap-selectors{
display: flex;
flex-direction: column;
justify-content: center;
.selector{
display: flex;
.price-card-selector{
border-radius: 5px 0 0 5px;
margin: 0 !important;
}
.ant-select-selection.ant-select-selection--single{
&.ant-select-selection--single .ant-select-selection__rendered {
margin-right: 30px;
@include media ('lg'){
margin-right: none;
}
}
display: flex;
.ant-select-arrow{
position: relative;
}
.ant-select-selection-selected-value{
display: flex !important;
justify-content: space-around;
align-items: center;
.image{
width: 25px;
}
.text{
margin-left: 5px;
width: 35px;
}
}
}
}
input{
background-color: #fafafa;
border: none;
border-radius: 0 5px 5px 0;
text-align: end;
padding: 0 10px;
width: 100%;
}
}
li{
display: flex !important;
}
.swap-icon{
margin-top: 30px ;
@include center;
cursor: pointer;
font-size: 20px;
&:hover{
color: #00bbff;
}
}
.to{
display: flex;
flex-direction: column;
justify-content: center;
}
}
哦,但是如果我尝试查看生产版本,我就知道了