-
Run
git clone https://github.com/Marciola/phoenix-bulma.git
-
Run
mix deps.get
inside of the phoenix-bulma/ root -
Run
npm install
inside of assets/ (cd assets && npm install
) -
Run
mix phx.server
-
Install Phoenix v.1.4+ using
mix phx.new YourAppHere
| commit -
Download Bulma locally
-
Copy
bulma.sass
and the sass folder intoassets/css/
| commit -
Add
node-sass
andsass-loader
toassets/package.json
under "devDependencies" | commit -
Add
sass-loader
to css file section ofassets/webpack.config.js
and change file extension to.scss
| commit -
Change import of
app.css
toapp.scss
inassets/js/app.js
| commit -
Rename
app.css
toapp.scss
inassets/css/
| commit -
Add
@import "./bulma.sass";
toassets/css/app.scss
| commit -
Run
npm install
inside ofassets/
Bulma should now be installed and ready to be used.
If you are getting the "failed to connect" Postgrex.Error run mix ecto.setup
- Phoenix website: http://www.phoenixframework.org/
- Bulma website: https://bulma.io/
- Adding sass/scss to Phoenix's webpack: https://elixirforum.com/t/phoenix-1-4-webpack-4-and-bulma-bootstrap-4-sass/14354/7