import style.scss inside index.module.scss in react

I have this file style.scss

.bg{
    background-color: green;
}

and then i have index.module.scss

.color{
    background-color: red;
    color: white;
}
@import "style.scss";

and this is my index.js

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import styles from'./styles.module.scss';

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <div className={styles.color}>test
<div className='bg'>inside</div>
</div>
      </React.StrictMode>
    );

but style.scss imported inside index.module.scss not working. Is there any way to fix this problem?