JulienCorb

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-sass and sass-loader to assets/package.json
  • Renamed assets/css/app.css to assets/css/app.scss
  • Added the sass-loader to the css file section in webpack.config.js and changing the extension to .scss
  • changed import css from "../css/app.css" to import css from "../css/app.scss" in assets/js/app.js
  • ran npm i in /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

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

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

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”;

Where Next?

Popular in Questions Top

vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New

Other popular topics Top

JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 40042 209
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New

We're in Beta

About us Mission Statement