Refactor CSS pt. 2 (Properly structure stylesheets folder)

app/javascript/packs/application.js

@@ -9,7 +9,7 @@ require("@rails/activestorage").start()
 require("channels")
 
 require("./bootstrap_custom")
-require("../stylesheets/application")
+require("../stylesheets/main")
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)

app/javascript/stylesheets/general/_index.scss

@@ -1,7 +1,7 @@
-@import './bootstrap_custom.scss';
+/*
-@import './navbar.scss';
+  This stylesheet contains styles that are general and
-@import './forms.scss';
+  could not be grouped in a file of their own
-@import './icons.scss';
+*/
 
 .container {
   max-width: 920px;

app/javascript/stylesheets/main.scss

@@ -0,0 +1,12 @@
+@import 'vendors/bootstrap_custom';
+
+@import 'general/index';
+@import 'general/navbar';
+@import 'general/form';
+@import 'general/icons';
+
+/*
+  Components stylesheets are not imported here. Instead,
+  they are imported in the specific React components
+  that use them
+*/