Fucking Scss on Phoenix

Ugh, I’ve already forgotten the most painful points of this…

But I assure you it was slightly painful.

Brunch, getting to know brunch was less painful than getting to know webpack.

All the files that you fuck with are web/static/css/ and in that file you will find app.css. I heard it’s possible to turn this into app.css.scss and it will work. But instead this time I made another app.scss. For some reason app.css is filled with a bunch of shit like bootstrap. I deleted that shit. Brunch compiles all these css files into one file and puts that file into /priv/static/css/app/css. Then that file is included via a cool phoenix function in the template. Now that I learned all that shit I have the amaaaaazing opportunity to try and get brunch to do shit for me.

Brunch uses package.json to do its shit.

"dependencies": {
  "autoprefixer": "^6.4.1",
  "bourbon": "^4.2.7",
  "bourbon-neat": "^1.8.0",
  "brunch": "~2.1.3",
  "clean-css-brunch": "~1.8.0",
  "css-brunch": "~1.7.0",
  "font-awesome": "^4.6.3",
  "normalize.css": "^4.2.0",
  "sass-brunch": "^2.6.3",
}

It’s essential to have sass-brunch. Then you’re like cool, that’ll just work out of the mother fucking BOX RIGHT? But no. It doesn’t.

Here’s the most confusing thing about scss on brunch. EVERY FILE NEEDS TO BE prefixed with an _. If you do not do that, it will compile twice. Hmm… maybe I set it up wrong. But either way this worked. Then in your .scss file, you’ll import shit.

here’s my app.scss.

@import "node_modules/normalize.css/normalize";
@import "rendered/_my_normalize.scss";

@import "node_modules/bourbon/app/assets/stylesheets/bourbon";
@import "node_modules/bourbon-neat/app/assets/stylesheets/_neat.scss";

@import "not_rendered/_variables";
@import "not_rendered/mixins/_full-background.scss";
@import "not_rendered/mixins/_custom-button.scss";
@import "not_rendered/mixins/_respond-to.scss";


@import "rendered/_base.scss";
@import "rendered/_background.scss";
@import "rendered/_form-container.scss";
@import "rendered/_form.scss";

Then for example, _form.scss is named web/static/css/rendered/_form.scss. I want to say I NEEDED to do this so that I was able to use mixins properly and have variables available throughout my application. Fuck either way, it wasn’t plug and play.

THE LAST MOST FUCKED UP PART OF ALL WAS trying to use font-awesome

Fuck, this could be changing sometime soon… but here’s the link that I used to get it to work…

http://cloudless.studio/articles/21-front-end-packages-with-phoenix-and-brunch

npm install --save font-awesome:

mkdir web/static/assets/fonts
cd web/static/assets/fonts
ln -s ../../../../node_modules/font-awesome/fonts/fontawesome-webfont.* .

Post Content