Me and my team use css modules (without .module extension) and sass with scss notation. Each .scss file is in the same dir in whic .jsx file is. We have structure like src/components/Avatar/Avatar.scss and import it as module in .jsx file.
Also, there are some files in src/styles dir, that contain some global variables.
I tried some ways of styling in JS apps and I found this way the simplest, cleanest and fastest 🏇
Me and my team use css modules (without .module extension) and sass with scss notation. Each
.scssfile is in the same dir in whic.jsxfile is. We have structure likesrc/components/Avatar/Avatar.scssand import it as module in.jsxfile.Also, there are some files in
src/stylesdir, that contain some global variables.I tried some ways of styling in JS apps and I found this way the simplest, cleanest and fastest 🏇
How did you configured it to not use the .module extension? Probably you did it inside webpack, but could you share the code?
Cool. I think this approach is much cleaner than styled components. But have you tried styled components? And what are your thoughts on this?
Soon after your comment we decided to use styled-components in part of our system. It's been a while with them, so I've got some thoughts.