How can I organize js, css and scss files for proper import and pipelining?

Question

Recently I bought a theme with assets in assets folders as:-

 1) assets/js/something.js  
2) assets/css/something.cs  
3) assets/sass/main.scss (with import statements for files inside 3 no. dashboard folder and sub-folders inside dashboard)  
4) assets/sass/dashboard/_variable.scss  
5) assets/sass/dashboard/mixins/something.scss  
6) assets/img/something.jpg  
7) assets/img/faces/some.png  

Now, I need to use the theme in rails assets pipeline and organized as:-

1) kept all *.js files in above (1) no. inside /app/assets/javascripts folder and in application.js file the code is :-

require rails-ujs  
require turbolinks  
require_tree .

(Js files are imported and no errors I think, since all files are in javascripts directory)

2) kept all *.css files inside /app/assets/stylesheets from point 2 above.
3) kept assets/sass/main.scss in point 3 above to /app/assets/stylesheets.
4) kept dashboard folder in point 4 above to /app/assets/stylesheets and the application.css file content is as:-

require_self  
require_tree .

I think this should work since all css is imported by require_tree .And the "main.scss" has imports for files from dashboard directory. But I get "Variable not found $font-weight-bold sass error" from variable defined in "_variables.scss" imported from "main.scss" file. How can I solve this and what should be the assets organization.

Thankyou all.

Answer 1

the way i have set up mine, works, but i don't know if its convention (- means folder, + means file):

-stylesheets
  -base 
   + globals.scss
   + mixins.scss
   + normalize.scss
   + variables.scss

  - styles
   + login.scss

  + applicaion.css.scss  
     require_self 
     require main

  + mains.scss here is where i import all the files
     @import "base/mixins.scss";
     @import "base/normalize.scss";
     @import "base/globals.scss";
     @import "base/variables.scss";
     // login
     @import "styles/login.scss";

- javasctipts
   + application.js 
     //= require something
     //= require_tree

   + something.js

and images in the asssts/image folder