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?
