JulienCorb
Install Bulma and SASS in Phoenix 1.4-dev
Hi everyone, I am also trying to install Bulma for a 1.4-dev project.
I added to my dependencies in package.json (left Jquery in devDependencies):
- “animate.css”: “^3.5.2”,
- “bulma”: “^0.6.2”,
- “bulma-extensions”: “^1.0.0”,
I added to my devDependencies in packages.json:
- “node-sass”: “^4.9.0”,
- “sass-loader”: “^7.0.1”,
- Added
node-sassandsass-loadertoassets/package.json - Renamed
assets/css/app.csstoassets/css/app.scss - Added the
sass-loaderto thecssfile section inwebpack.config.jsand changing the extension to.scss - changed
import css from "../css/app.css"toimport css from "../css/app.scss"inassets/js/app.js - ran
npm iin /myproject/assets (got no error)
but Bulma isn’t working.
It seems that the path to my css is wrong, because I get this error:
GET http://localhost:4000/css/app.scss net::ERR_ABORTED 404 (Not Found)
the corresponding line in my code is this one (in the head):
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.scss") %>"/>
whereas my path to my app.scss file is: /myproject/assets/css/app.scss
Did I forget something ?
Marked As Solved
dokuzbir
You should point output css not scss
Routes.static_path(@conn, "/css/app.css")
also did you import bulma in app.scss file
Also Liked
JulienCorb
Hi @dokuzbir, thank you for your help !
So I pointed the path to /css/app.css as you mentionned and the error disappeared. (Although I don’t get it because I renamed my file app.scss)
I didn’t import bulma in app.scss. How should I do this ? @import "bulma"; ?
edit: Indeed. I added @import "bulma"; to my app.scss and it now works perfectly.
Last Post!
ondrej-tucek
Try change in app.scss the row with @import "bulma-extensions"; to:
// for entire import of extensions
@import “../node_modules/bulma-extensions/src/sass/index.sass”;
or
// for import of specific extension, in this case it’s bulma-switch
@import “../node_modules/bulma-extensions/bulma-switch/src/sass/index.sass”;
Popular in Questions
Other popular topics
Latest Phoenix Threads
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #hex
- #security









