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.

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

1 5068 17

2018-05-30 08:27:48 UTC

Showing Posts 1 to 10

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

OvermindDL1

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

Post #1

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

Post #2

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. ^.^

Post #3

cpgo

I did this quite a while ago so I don’t know if its working
https://github.com/cpgo/authen

Post #4

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 #5

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?

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 #7

dwyd

Can you try changing this…

to this…

after: [ "css/app.sass"]

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

Post #8

richjdsmith

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.