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

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

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

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

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

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?

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

Can you try changing this…

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.

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