Hello all, and thanks for this great forum!

I am learning Phoenix 1.3, and having trouble specifying the order of my local SCSS files. The specific problem I am having is that I want a “colors.scss” file to store all my application’s color variables, and need this loaded first before any of my other component, typographic, or general style files.

So I am stuck getting “brunch error…” messages, where it cant find $color-var specified in my colors.scss file. It works fine when I shove everything into one file.

Files in my assets/css/SUBDIR/*.scss location are seemily loaded in “random” order. My colors.scss file is not loaded in an expected order, and files which depend on its variables are loaded first (even if theyre in lower order, alphabetically speaking).

I have tried specifying order in my brunch config, as per the recommendations. This seems to have zero effect on the order. Furthermore, it seems specific to how files are concatenated in the web/static/css/ location, which does not help me. I need to order the files in my assets/css/ dir.

Finally, Ive also tried to specify the order in my css/app.scss file itself, via import statements. This seems to have zero effect - the color variables are simply not found in files specified later.

Upon further inspection, it seems like I need to declare the variables in every file - if I declare them in the first file that claims its missing the variable, another file is simply missing the same one. I tried declaring all my SASS variables in css/app.scss, and the subsequent files in the css/SUBDIR/ location are still missing the vars. I come from a Ruby on Rails background, so I could be a bit naive as to how CSS/SCSS files are loaded and compiled with Phoenix.

What is the convention for organizing SCSS files in Phoenix > 1.3.0, and how can I keep variables in certain files, and load other files later?

Thanks in advance!