Next Js with SCSS not applied in production (built-mode) - sass

Question

I have problem with some parts of my spinning-wheel component in built-mode when I deploy my application to server.I have no issue if I run the code locally with "npm run dev", but the problems come when run the code with "npm run build" and "npm start".
Here is the snapshots of development mode (picture 1) and built mode (picture 2):
And this is the scss file I used :
.board-arisan-container {
--wheel-size: 300px;
--wheel-slice-spacing: 50px;
--wheel-border-size: 5px;
--wheel-color: #ffad00;
--neutral-color: #ffffff;
--PI: 3.60;
--nb-item: 0;
--item-nb: 0;
--selected-item: 0;
--nb-turn: 5;
--spinning-duration: 4s;
--reset-duration: 0.25s;
transform: rotate(-90deg);
.wheel-container {
display: block;
position: relative;
box-sizing: content-box;
width: calc(var(--wheel-size) + 2 * var(--wheel-border-size));
height: calc(var(--wheel-size) + 2 * var(--wheel-border-size));
padding: 3px;
margin: auto;
background-color: var(--neutral-color);
border: solid var(--wheel-color) 10px;
border-radius: 50%;
user-select: none;
}
.wheel-container::before,
.wheel-container::after {
content: "";
display: block;
position: absolute;
height: 0;
width: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
border: solid transparent 20px;
border-left-width: 0;
}
.wheel-container::before {
right: 0px;
border-right-color: var(--wheel-color);
}
.wheel-container::after {
right: -5px;
border-right-color: var(--neutral-color);
}
/* Roue */
.wheel {
display: block;
position: relative;
box-sizing: content-box;
margin: auto;
width: var(--wheel-size);
height: var(--wheel-size);
overflow: hidden;
border-radius: 50%;
border: solid var(--wheel-color) var(--wheel-border-size);
background-color: var(--wheel-color);
transition: transform var(--reset-duration);
transform: rotate(0deg);
cursor: pointer;
}
.wheel.spinning {
transition: transform var(--spinning-duration);
transform: rotate(calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))));
}
.wheel::after {}
.wheel-item {
display: block;
position: absolute;
box-sizing: border-box;
/* position de l'item */
top: 50%;
left: 50%;
width: 50%;
transform-origin: center left;
transform: translateY(-50%) rotate(calc(var(--item-nb) * (360deg / var(--nb-item, 1))));
/* texte */
color: var(--neutral-color);
text-align: right;
padding: 0 50px 0 50px;
font-family: var(--wheel-font);
}
/* Background de l'élément = triangle rose plus clair */
.wheel-item:before {
content: " ";
display: block;
position: absolute;
box-sizing: border-box;
z-index: -1;
width: 0;
height: 0;
top: 50%;
left: 50%;
transform: translate(-47%, -50%);
padding-left: 0px;
--slice-max-width: calc(var(--PI) * var(--wheel-size) + var(--wheel-size) / 2);
--slice-width: calc((var(--slice-max-width) / var(--nb-item)) - var(--wheel-slice-spacing));
border: solid transparent calc(var(--slice-width) / 2);
border-left: solid transparent 0;
border-right: solid var(--neutral-color) calc(var(--wheel-size) / 2);
}
}
here is the the component code :
...
const wheelVars = {
'--nb-item': props.items.length,
'--selected-item': selectedItem,
}
const spinning = selectedItem !== null ? 'spinning' : '';
return( <div className="board-arisan-container">
<div className="wheel-container">
<div className={`wheel ${spinning}`} style={wheelVars} onClick={() => clearSelectedItem()}>
{props.items.map((item, index) => (
<div className="wheel-item" key={index} style={{
'--item-nb': index,
color: '#ffad00',
fontSize: 30,
fontWeight: 'bolder',
}}>
<span>{item}</span>
</div>
))}
</div>
</div>
</div>)
Thanks!