1

I have this problem, I have these scss files for all my global variables:

colors.scss
fonts.scss
helpers.scss

And I have these scss files for my component based and import it on top of the .jsx files:

header.scss
footer.scss
searchbar.scss

My problem in all of my component based scss files, I need to import the color.scss and helpers.scss in that way it will be included multiple times in header.scss,footer.scss and searchbar.scss

How do you guys work on it, been searching for an hour and did not found any solutions.

Thanks!

Improve this question

2 Answers 2

Reset to default
1

Just make a app.scss file and import all the scss files into that one starting with your variable files.

We do a similar thing at my work and have one file that we import all our component scss files into and any shared dependencies go above those that way you are only having to import once. The main thing is to make sure that files with dependencies go below the dependency files.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Then I import the app.scss file to the index.html?
Normally you'd have some sort of CSS preprocessor that takes place to convert the .scss file into .CSS and add whatever the final file is called to your index.html.
0

Create a global scss like so:

global.scss => imports colors.scss, fonts.scss, helpers.scss

and include it in your root JS file.

This way, every time you create a module, it will have these default styles.

Improve this answer

1 Comment

if i do this. I will just include the global.scss to the root JS file and will not include component base scss file on each of my component?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.