With Phoenix 1.6 just around the corner, I figured I’d make a tutorial on how to add Bulma to a new Phoenix 1.6 project. By leveraging dart_sass and a new Bulma Hex package I created, I was able to do it without having to involve Node or NPM at all!
I know TailwindCSS is where it is at nowadays, but sometimes it is nice to use a CSS library with more ready-made component classes, especially for quick MVPs.
I hope to make another tutorial for Bootstrap in the next coming days, and make a similar
:bootstrap package to make it easy to install without needing Node or NPM.
Very nice tutorial @kevinlang.
A couple of questions.
- Is maintaining the bulma hex package manual? May be if there is a version sync with official bulma package - it might be useful.
- It is manual for now, but adding a simple script would be really easy. All it needs to do is get the
tgz from NPM and copy over the
bulma.scss file and
scss/ folder. Plus, for better or for worse, Bulma updates pretty infrequently - there has only been 3 releases this past year.
- I haven’t thought about the JS part, that is a very good point. I think the solution would be to have a
package.json in the root of the package for the JS part that can be traversed today by ESbuild when you import it in your
app.js (this is how
phoenix_html works for example) in addition to a root
With Bootstrap it is definitely tricky with LiveView, and probably beyond the scope of the package I was envisaging - which is to simply be an alternative way to getting assets without using
npm. I’ll have to look over the SurfaceBootstrap library. From what I read here, it seems that even with the removal of the JS dependency from Bootstrap, it is still a bit of a hassle to make work with LiveView.
Hi @kevinlang . Thanks for the tutorial and packages. I have a problem where
@import "bulma"; works fine but if I try to customise my bulma payload to only load specific assets, such as
@import "bulma/sass/utilities/_all.sass"; I see this error in the logs:
Error: Can't find stylesheet to import.
5 │ @import "bulma/sass/utilities/_all.sass";
css/app.scss 5:9 root stylesheet
Any idea what’s going on here? I checked my code against your repo and everything seems fine.
When you import bulma using this package, you are importing this file: bulma-elixir/bulma.sass at master · kevinlang/bulma-elixir · GitHub
So if you want to use this specific sass file, you should do:
And not import bulma
I’ll try that out tomorrow, obrigado Henrique.
What happens if another package in the path also has the same folder structure?
I think that if we put
import "./sass" with the “./”, it will search in the relative path, otherwise we get an error.