将自定义样式表导入create-react-app的app.scss

Question

I am new to styling using app.scss for a new create-react-app and would like to know the following:

1. Should i store all the .scss and .css files in the style folder?
2. If I would like to import all of them into the app.scss, how do I go about doing that?

I noticed that app.scss does these:

1. @import '~bootstrap/scss/bootstrap'
2. $fa-font-path: '~@fortawesome/fontawesome-free/webfonts'

When i tried to do this: @import './myStyles.css' it does not get picked up. I am not sure what is going on.

The reason i am adament about putting it in the app.scss file is becauase i created a toggle that allows me to switch between dark and light theme. However, I am unable to add customed theme to the existing themes.

Hope my question is clear

Answer 1

Here is reply for you query-

1.Should i store all the .scss and .css files in the style folder? - for this you have to make two folder, one is css and another sass(better approach)

2.If I would like to import all of them into the app.scss, how do I go about doing that?- "@import 'reset';" no need of scss extension

If you are working on big project then i would suggest you that better follow this structure.

inside sass or scss folder make subfolder for diffrent works like vendor, module,particles etc. like modules/_colors.scss and follow below structure

// Modules and Variables

@import "partials/base"; @import "partials/buttons";

I hope this will help.