richjdsmith

Brunch Config Instructions for Bulma

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.

Installed sass-brunch
$ cd assets && npm install --save sass-brunch
Installed bulma
$ npm install --save bulma
Removed bootstrap
$ echo "" > css/phoenix.css
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
  }
};

Renamed app.css to app.scss
$ cd assets/css; mv app.css app.scss
Imported Bulma into my app.scss
@import "bulma";
Added a folder for my scss files
$ mkdir assets/scss $ touch assets/scss/custom.scss
Just added some dummy code to my new custom.scss
@import "../node_modules/bulma/sass/utilities/initial-variables"; $primary: $red
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!

17 comments

/phoenix #brunch

23 4649 17

2018-05-30 08:27:48 UTC

Most Liked

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!

Post #17

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

Post #6

cmkarlsson

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

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
        }
    }
  },

Post #8