dwyd

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
1
Post #11
richjdsmith

richjdsmith OP

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']
      }
1
Post #12
dwyd

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.

2
Post #13
kaputse

kaputse

Hey … sorry for the delay. Had a busy week (:family_man_woman_boys: :baby_bottle:) :blush:

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. :+1:

1
Post #14
richjdsmith

richjdsmith OP

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!

1
Post #15
EssenceOfChaos

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!

4
Post #16
greenz1

greenz1

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

0
Post #17
— All posts loaded —