I am currently developing a React application and facing an issue with my SCSS files. I have three SCSS files, one main file that contains theme variable colors, and the other two are located in component folders.
When I import the main SCSS file into the contactForm styles.css and apply the variable color, everything works as expected. However, when I import the main SCSS file into the keepInTouchForm styles.scss, it disrupts the styling of the contactForm.
The question is why does this happen and what is the proper way to maintain one main.scss file with all variables and reference them across multiple SCSS files?
Below is my folder structure:
- components
-- contactForm
--- index.js
--- styles.scss
-- keepInTouchForm
--- index.js
--- styles.scss
- scss
-- main.scss
The main.scss file contains the following code:
$theme-colors: (
'primary': #00a677,
'secondary': #dde1e7,
);
Code inside styles.scss for the contactForm folder:
@import '../../scss/main.scss';
.form-control {
border: 1px solid theme-color('secondary');
}
Code inside styles.scss for the keepInTouchForm folder:
@import '../../scss/main.scss'; //this breaks the above code