How to Specify Order of Local CSS / SCSS Files with Brunch?

Phoenix Forum Questions / Help
, , , ,
1

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! :smiley:

2

I’m not sure if there’s a convention, and I haven’t used brunch in a while but:

Assuming you’re concatenating to a app.scss file which includes the following lines:

@import "colors";
@import "custom";

Declarations in custom.scss should be able to access variables declared in colors.scss . Because sass is compiled, if you then have another file extra.scss, even if you’re using both app.scss and extra.scss in the same page, extra won’t have access to the vars declared in colors unless you make an import statement in extra as well, or make extra be another import in app.scss

1 Like
3

Thanks @amnu3387. I have tried adding those import statements in the same way in my assets/css/app.scss. Unfortunately brunch still tells me the same errors, basically custom cant find declarations in colors.

My app.scss looks like what follows:

$fa-font-path: "../fonts";

@import "font-awesome";
@import "bootstrap";

@import "colors";
@import "typography";
@import "bootstrap_overrides";
@import "my_app_global_styles";
@import "alerts";
@import "header";
@import "nav";
@import "some_other_component";

…and all of the files under colors state they cant find anything declared in colors.

My colors.scss file is stupidly simple:

/* Application Color References */

$grey-dk: #111111;
$grey-md: #222222;
$grey-lt: #AAAAAA;

$white-md: #D0D0D0;

the my_app_global_styles.scss is also quite simple:

/** Global Element Style **/

body {
  margin: 0;
  padding: 0;
  background-color: $grey-dk;
  color: $grey-lt;
}

Yet it is the first to complain that it cant find $grey-dk, followed by the same error in header. That order surprises me.

The only way I can get this to work is by @import "colors"; directly in each SCSS file I have, which is undesirable.

The reason I mention a “conventional” way to organize SCSS files in this way, is being used to the sass-rails gem from the Ruby on Rails ecosystem, which facilitates such organization of CSS asset files. It may have made me naive as to how sass files are organized outside of the Rails context.

So I guess I can ask - how do developers using Phoenix typically organize SCSS files, and keep the @import statements specified in one “parent” file (app.scss) ?

4

Ah,
so I went to checkout on another project . I added the test.scss to it, and on it a mention of a variable in checkout.scss

//....
stylesheets: {
      joinTo: "css/app.css",
      order: {
          after: ["web/static/css/checkout.scss", "web/static/css/test.scss", "web/static/css/app.scss"] // concat app.css last
      }
    },
//....

And app.scss contains

@import "checkout";
@import "test";

This funnily enough, results in a sass compile error, BUT, the scss that triggers the error, `Undefined variable: “$red”.

color: $red !important;

-----------^
^G
` is actually being “compiled”(?), because it changes the color - then I restarted the iex&server and I got this error which was basically what took me out of brunch a while ago:

16 Apr 22:03:56 - error: Initialization error -  Cannot read property 'brunchPluginName' of null ^G
Stack trace was suppressed. Run with `LOGGY_STACKS=true` to see the trace.

At the time it started happening and nothing I did, from cleaning up npm_modules, to reinstalling solved it, so I just said f*** it, changed to webpack and it’s been fine. I even like brunch but started having a proper breakfast and lunch and it now works better…

5

Nice analogy!

Well thanks for testing this out for me. I unfortunately need to stick with brunch for the time being. Webpack is a whole other hell, although arguably more familiar to me ;).

Im going to stick these import statements in “all of the things” for now, and figure this out later. Lost about 6 hours trying to figure out something so simple today!

1 Like
6

In the end I found webpack to be easier to config - I did loose some time setting it up, but from then on it hasn’t given me any problems (and it’s doing way more than brunch did).

But probably brunch should handle this fine, so I imagine there’s something else missing.

1 Like
7

Ok I figured out the problem - Im just simply new to brunch :slight_smile:

The problem was absence of an ignored configuration. I need to tell brunch which files or directories to ignore, as it will just compile each file individually. I stumbled upon this in an old Github issue.

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/assets/static". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(static)/,
    ignored: /^(css\/my-scss-files-dir)/
  },

This way, app.scss is the only thing that brunch compiles, and this file, in turn, handles the order of importation. Now all my variables work!

1 Like
8

Well, yeah it had to be something simple :smiley: glad you solved it

9

Just in case… brunch will be replaced by webpack in future phoenix release.

1 Like