Struggling to add Third-Party CSS framework to Phoenix

Phoenix Forum Questions / Help
, , , ,
1

Hopefully not too much of a noob question. Just trying to add ‘timbercss’ to my Phoenix project and I’m just unsure how to proceed. There is no CDN, and just wondering how other have added other css frameworks in. I’ve added the package via yarn

{
  "dependencies": {
    "timbercss": "^0.1.84"
  }
}

Then I was expecting to just import it via. 

/* This file is for your main application CSS */
@import "./phoenix.css";
@import "timbercss";
/* or */
@import "../../node_modules/timbercss/src/scss/timber.scss";

But I’m getting nothing. I’ve seen posts suggesting adding dart_sass to cope with Sass, but I’m just not convinced I’m doing this properly. I also need to think in terms of adding TomSelect / Select2 javascript libraries so it will be good to know how to add both CSS and JS.

Many thanks

RobL

2

You could just download the compiled sources: timbercss/dist at master · unlimitDesign/timbercss · GitHub or SCSS: timbercss/src at master · unlimitDesign/timbercss · GitHub.
Add it to e.g. assets/vendor/timbercss. That way you could import it as follows:

@import "../vendor/timbercss/scss/timber.scss";

You can get it auto compiled using dart-sass.

1 Like
3

That’s a good plan. Cheers