How to handle shared css file in react

What is the best way to handle shared scss file in react? Assuming I have the following file

// variables.scss
$primary: rgb(1,2,3);
$secondary: rgb(2,3,4);

And I have multiple components who need to use those colors. of-course every component has its own scss file and I import this file in component jsx file, do I need to import this file multiple times in every component who need to use those variables?

If I do import this file in every component scss file does webpack with sass-loader know to handle it and import it once?

UPDATE: To explain the question better this is my issue: I have a component A this is the jsx file

// A.jsx
import React from 'react';
import './A.scss'

//more code here...

A scss looks like this:

//A.scss
import '../../variables.scss';

and I also have component B this is the jsx file

// B.jsx
import React from 'react';
import './B.scss'

B scss looks like this:

//B.scss
import '../../variables.scss';

Now as you can see both A.scss and B.scss imports the variables, is this the right way? If yes does webpack sass-loader know not import the same file twice? If not what is the right way?