Install Bulma and SASS in Phoenix 1.4-dev

Phoenix Forum Questions / Help
,
1

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 ?

2

You should point output css not scss

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

also did you import bulma in app.scss file

3 Likes
3

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.

3 Likes
4

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.

5

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