Install Bulma and SASS in Phoenix 1.4-dev

JulienCorb

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 ?

4 comments

/phoenix #sass #bulma

0 2517 4

2019-11-13 21:33:00 UTC

Showing Posts 1 to 4

Show Best Posts
Show All (oldest first)
Show All (newest first)

dokuzbir

You should point output css not scss

Routes.static_path(@conn, "/css/app.css")

also did you import bulma in app.scss file

Post #1

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.

Post #2

phoebe

Hi, did you manage to install bulma-extensions too?

I followed the instructions and have loaded bulma without issues, but when I try the same with bulma-extensions,

In package.json:

  "dependencies": {
    "bulma": "^0.7.2",
    "bulma-extensions": "^4.0.0",
    ... 
  }

In app.scss:

@import "bulma"; 
@import "bulma-extensions";

I get the following error message about Not enough space, even though I have over 40GB disk and ~2GB free memory.

ERROR in ./css/app.scss
Module build failed: ModuleBuildError: Module build failed: Not enough space
at runLoaders (/home/elixirprojects/assets/node_modules/webpack/lib/NormalModule.js:244:20)
at /home/elixirprojects/assets/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /home/elixirprojects/assets/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback (/home/elixirprojects/assets/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.render [as callback] (/home/elixirprojects/assets/node_modules/sass-loader/lib/loader.js:52:13)
at Object.done [as callback] (/home/elixirprojects/assets/node_modules/neo-async/async.js:7974:18)
at options.error (/home/elixirprojects/assets/node_modules/node-sass/lib/index.js:294:32)
@ ./js/app.js 3:11-37
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!css/app.scss:
[./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./css/app.scss] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./css/app.scss 57 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./css/app.scss
Module build failed: Not enough space

Is this really a memory space issue?

Thanks.

Post #3