Brunch Config Instructions for Bulma

[richjdsmith]

Anyone willing to explain to me how to include the Bulma CSS Framework with Brunch? I haven’t warped my head around brunch yet. Here’s what I have done so far.

1. Installed sass-brunch
   $ cd assets && npm install --save sass-brunch

2. Installed bulma
   $ npm install --save bulma

3. Removed bootstrap
   $ echo "" > css/phoenix.css

4. Added sass-brunch to my Brunch Config (I think this is where I went wrong)
   Gist to brunch-config (how do I embed?)

Summary

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"

      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //   "js/app.js": /^js/,
      //   "js/vendor.js": /^(?!js)/
      // }
      //
      // To change the order of concatenation of files, explicitly mention here
      // order: {
      //   before: [
      //     "vendor/js/jquery-2.1.1.js",
      //     "vendor/js/bootstrap.min.js"
      //   ]
      // }
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/assets/static". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(static)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "scss", "js", "vendor"],
    // Where to compile files to
    public: "../priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    sass: {
      includePaths: ['node_modules/bulma/']
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true
  }
};

5. Renamed app.css to app.scss
   $ cd assets/css; mv app.css app.scss

6. Imported Bulma into my app.scss
   @import "bulma";

7. Added a folder for my scss files
   $ mkdir assets/scss $ touch assets/scss/custom.scss

8. Just added some dummy code to my new custom.scss
   @import "../node_modules/bulma/sass/utilities/initial-variables"; $primary: $red

9. Added my custom css to app.scss below the import for bulma.
   @import "../scss/custom";

I did all this following instructions from @kaputse (whom it appears is on here! :D)

Unfortunately, doing all this, compiling of css/app.scss failed

[debug] Processing with LaterReviewWeb.PageController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 352µs
18:08:27 - info: Reloading watcher...
(node:33658) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGTERM listeners added. Use emitter.setMaxListeners() to increase limit
18:08:29 - error: Compiling of css/app.scss failed. L2:1:
   File to import not found or unreadable: bulma
   Parent style sheet: /Users/richsmith/later_review/assets/css/app.scss Error: File to import not found or unreadable: bulma
          Parent style sheet: /Users/richsmith/later_review/assets/css/app.scss

   >> @import "bulma";
      ^
Stack trace was suppressed. Run with `LOGGY_STACKS=1` to see the trace.
[debug] Live reload: priv/static/js/app.js
[debug] Live reload: priv/static/js/app.js 

Any help or suggestions would be appreciated and hopefully this can solve the issue for others. Cheers!

[OvermindDL1]

If using scss make sure to list the proper import directories in the scss plugin configuration.

[richjdsmith]

Sorry for being a bit daft, but do you mind giving me an example? Should I be using:

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    sass: {
      includePaths: ['node_modules/bulma/sass']
                                   //HERE? ^
    }
  },

[OvermindDL1]

Something like that should work, but currently in the project that I’m still using brunch in I’m just using:

  plugins: {
    // ...other plugin configurationss here...
    cleancss: {
      level: 0, // level 1+ breaks the CSS, the fonts vanish, some blocks vanish, wtf...
    },
    sass: {
      options: {
        includePaths: [
          'node_modules'
        ]
        // debug: 'comments', // 'debug',
      },
      allowCache: true,
      sourceMapEmbed: true,
      precision: 8,
      modules: false
    },
    postcss: {
      processors: [
        require('autoprefixer')(['last 8 versions']),
        require('csswring')({
          // preserveHacks: true,
          // removeAllComments: true,
        })
      ]
    },
    // ...and still more configurations...
  },

Then I use the full ‘project’ path to it. I found it helps keep things obvious of what comes from where. ^.^

[cpgo]

I did this quite a while ago so I don’t know if its working

cpgo/authen

[dwyd]

The following configuration worked for me when I added Bulma to a Phoenix 1.3 project… your npm steps look correct at a glance. Make sure sass and bulma are in node_modules.

package.json should have something similar after NPM install

# ./assets/package.json
{
...
  "dependencies": {
...
    "bulma": "^0.5.0",
...
  },
  "devDependencies": {
...
    "sass-brunch": "^2.10.4",
...
  }
}

Update brunch-config.js

# ./assets/brunch-config.js
exports.config = {
  files: {
    stylesheets: {
...
      joinTo: "css/app.css",
      order: {
        after: [ "css/app.scss"]
      }
    },
...
  },

...

  // Configure your plugins
  plugins: {
...
    sass: {
      mode: 'native',
      options: {
        includePaths: ['node_modules/bulma']
      }
    }
  },
...
};

Add app.scss to ./assets/css/

# ./assets/css/app.scss
@import "bulma";

You can do all your overrides in app.scss

Compile the app

iex -S mix phx.server

[richjdsmith]

Sorry to be such a bother, but I am still getting:

22:46:54 - info: compiled 6 files into 2 files, copied 3 in 1.9 sec 22:46:54 - error: Cannot read property 'verbose' of undefined

This is my app.scss:

/* This file is for your main application css. */
@import "bulma";

My app.css is empty.

Here is my package.json:

  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "bulma": "^0.6.0",
    "babel-brunch": "6.1.1",
    "brunch": "2.10.9",
    "clean-css-brunch": "2.10.0",
    "copycat-brunch": "^1.1.0",
    "sass-brunch": "^2.10.4",
    "uglify-js-brunch": "2.10.0"
  }

and the important bits from my brunch-config:

...
},
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: [ "css/app.scss"]
      }
    },
...

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    sass: {
      mode: 'native',
      options: {
        includePaths: ['node_modules/bulma']
      }
    }
  },
...

Any ideas?

[cmkarlsson]

I just set bulma + phoenix 1.3 up a couple of days ago and I followed this gist:

https://gist.github.com/eproxus/545618f91983ff302a0a734888e7d01c

But replaced bootstrap with bulma.

With the exception that my app.scss looks like this:

@import "node_modules/bulma/bulma";

and my brunch config sass option looks like this:

  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    sass: {
        options: {
            includePaths: ["node_modules/bulma/sass"],
            precision: 8
        }
    }
  },

[dwyd]

Can you try changing this…

@richjdsmith

stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: [ "css/app.scss"]
      }
    },

to this…

after: [ "css/app.sass"]

but leave the actual file like this css/app.scss?

[richjdsmith]

@dwyd

to this…

after: [ “css/app.sass”]

but leave the actual file like this css/app.scss?

It made no difference.

Still getting:
23:36:28 - error: Cannot read property 'verbose' of undefined Stack trace was suppressed. Run with LOGGY_STACKS=1 to see the trace.

[richjdsmith]

I also tried deleting node_modules and npm install'ing again to no avail.

[dwyd]

I remember running into similar issues. Maybe try the following (in no particular order)?

# clean up stale files
cd assets/
rm ./package-lock.json
rm -r ./node_modules
npm cache clear --force
npm install
./node_modules/brunch/bin/brunch build

# rebuild sass if needed
#  warn: Loading of sass-brunch failed due to Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (57)
cd assets/
npm rebuild node-sass
npm install
./node_modules/brunch/bin/brunch build

[richjdsmith]

Nada.

Fortunately, it seems to be compiling as far as I can tell anyhow. But the brunch watching task is slow (and isn’t normally), and I am still getting this damned error. I’ve even tried running brunch-sass both in native and not.

The slow brunch compiling leads me to believe that it’s getting caught on something then continuing on. For now I suppose I will ignore it until I get frustrated enough to keep working at it.

$./node_modules/brunch/bin/brunch b 12:21:10 - info: compiled 6 files into 2 files, copied 3 in 1.8 sec 12:21:10 - error: Cannot read property 'verbose' of undefined

For the curious, here are some sass-brunch configs I’ve tried (various true/false combos etc.).

sass: {
      allowCache: true,
      mode: 'native',
      sourceMapEmbed: true,
      options: {
        includePaths: ['node_modules/bulma/'],
        options: ['--quiet']
      }

[dwyd]

Is this still your current package.json file?

  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "bulma": "^0.6.0",
    "babel-brunch": "6.1.1",
    "brunch": "2.10.9",
    "clean-css-brunch": "2.10.0",
    "copycat-brunch": "^1.1.0",
    "sass-brunch": "^2.10.4",
    "uglify-js-brunch": "2.10.0"
  }

The project I have working looks more like this…

  "dependencies": {
    "bulma": "^0.6.0",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    # "bulma": "^0.6.0",
    "babel-brunch": "6.1.1",
    "brunch": "2.10.9",
    "clean-css-brunch": "2.10.0",
    # "copycat-brunch": "^1.1.0",
    "sass-brunch": "^2.10.4",
    "uglify-js-brunch": "2.10.0"
  }

Maybe try with a fresh project? This link won’t be helpful but may confirm that the issue is related nodejs and/or npm. https://github.com/phoenixframework/phoenix/issues/2519

I hope you get it working but at the moment I not sure what else to suggest.

[kaputse]

Hey … sorry for the delay. Had a busy week ( )

I tried the steps I layed out in the blog and it just works for me. One thing I found was that the editor messed up step 4. Thanks for the comment on that. I fixed it.

[richjdsmith]

In case anyone finds this, I solved it!

Here’s how to install Bulma in a freshly installed Elixir Phoenix 1.3 project:

1. $cd assets

2. $npm install --save-dev sass-brunch && npm install --save bulma

3. $cd css && rm -f phoenix.css

4. $mv app.css app.scss

5. $echo '@import "node_modules/bulma/bulma";' >> app.scss

6. Update brunch-config.js to the following:

      files: {
        javascripts: {
          joinTo: "js/app.js"
   
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["web/static/css/app.css"] // concat app.css last
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
    },
   

and:

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    sass: {
      options: {
        includePaths: ["node_modules/bulma/sass"], // Tell sass-brunch where to look for files to @import
        precision: 8 // Minimum precision required by bootstrap-sass
      }
    }
  },

7.Boom. Done! Go enjoy a chocolate bar or something, you’ve now got Bulma.io running on your phoenix site!

To everyone above who helped me, thanks so much! Not sure what the heck was going on, but I just did the above steps on a new project and ran into no errors at all. Such is programming!

[EssenceOfChaos]

Here is a simpler set up for using different front-end frameworks.

Also, it looks like you are copy/pasting from a project that was made prior to phoenix 1.3 (there is no longer a “web” folder in the root directory). I have a video tutorial on how to get started with Phoenix and I chose to use Bulma as the css framework, check it out here. If you like it please give it a thumbs up!

To use Sass with Phoenix, install the “sass-brunch” plugin as a dev-dependency. Leave the file concatenation as is and rename the assets/css folder to scss. This way you can also rename app.css to app.scss and the only thing you have to change in the brunch.config is the one path under “watched:” from “css” to “scss”.

As mentioned, add the sass plugin to the plugins section of brunch config, specifying any paths that should be included. This would be like

sass: {
            options: {
                includePaths: [
                    "node_modules/bootstrap/scss",
                    "node_modules/font-awesome/fonts"
                ]
            }

This works for bootstrap, foundation, and other frameworks that use scss.

With this setup, you can create as many stylesheets as needed, prepend them with underscores ( _ ) as in, _variables.scss and @import them into your main stylesheet app.scss.

Hope this helps someone!

[greenz1]

Nice tutorial for getting started and of course getting instructions for using some other UI framework