<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="55926" data-post-id="55926">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dwyd" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dwyd/120/6969_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dwyd
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I remember running into similar issues. Maybe try the following (in no particular order)?</p>
<pre data-code-wrap="bash"><code class="lang-bash"># 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
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="55926" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/brunch-config-instructions-for-bulma/9654/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-55926" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="55926"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="55977" data-post-id="55977">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="richjdsmith" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/richjdsmith/120/4955_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  richjdsmith
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Nada.</p>
<p>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.</p>
<p>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.</p>
<p><code> $./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</code></p>
<p>For the curious, here are some sass-brunch configs I’ve tried (various true/false combos etc.).</p>
<pre><code>sass: {
      allowCache: true,
      mode: 'native',
      sourceMapEmbed: true,
      options: {
        includePaths: ['node_modules/bulma/'],
        options: ['--quiet']
      }
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="55977" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/brunch-config-instructions-for-bulma/9654/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-55977" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="55977"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="56034" data-post-id="56034">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dwyd" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dwyd/120/6969_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dwyd
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Is this still your current <code>package.json</code> file?</p>
<pre data-code-wrap="json"><code class="lang-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"
  }
</code></pre>
<p>The project I have working looks more like this…</p>
<pre data-code-wrap="json"><code class="lang-json">  "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"
  }
</code></pre>
<p>Maybe try with a fresh project? This link won’t be helpful but may confirm that the issue is related <code>nodejs</code> and/or <code>npm</code>. <a href="https://github.com/phoenixframework/phoenix/issues/2519" rel="noopener nofollow ugc">https://github.com/phoenixframework/phoenix/issues/2519</a></p>
<p>I hope you get it working but at the moment I not sure what else to suggest.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="56034" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/brunch-config-instructions-for-bulma/9654/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-56034" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="56034"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="56165" data-post-id="56165">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kaputse" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kaputse/120/4693_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kaputse
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey … sorry for the delay. Had a busy week (<img src="https://forum.elixirforum.com/images/emoji/apple/family_man_woman_boys.png?v=15" title=":family_man_woman_boys:" class="emoji" alt=":family_man_woman_boys:" loading="lazy" width="20" height="20"> <img src="https://forum.elixirforum.com/images/emoji/apple/baby_bottle.png?v=15" title=":baby_bottle:" class="emoji" alt=":baby_bottle:" loading="lazy" width="20" height="20">) <img src="https://forum.elixirforum.com/images/emoji/apple/blush.png?v=15" title=":blush:" class="emoji" alt=":blush:" loading="lazy" width="20" height="20"></p>
<p>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. <img src="https://forum.elixirforum.com/images/emoji/apple/+1.png?v=15" title=":+1:" class="emoji" alt=":+1:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="56165" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/brunch-config-instructions-for-bulma/9654/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-56165" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="56165"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="60401" data-post-id="60401">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="richjdsmith" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/richjdsmith/120/4955_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  richjdsmith
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>In case anyone finds this, I solved it!</p>
<p>Here’s how to install Bulma in a freshly installed Elixir Phoenix 1.3 project:</p>
<ol>
<li>
<p><code>$cd assets</code></p>
</li>
<li>
<p><code>$npm install --save-dev sass-brunch &amp;&amp; npm install --save bulma</code></p>
</li>
<li>
<p><code>$cd css &amp;&amp; rm -f phoenix.css</code></p>
</li>
<li>
<p><code>$mv app.css app.scss</code></p>
</li>
<li>
<p><code>$echo '@import "node_modules/bulma/bulma";' &gt;&gt; app.scss</code></p>
</li>
<li>
<p>Update <strong>brunch-config.js</strong> to the following:</p>
<pre><code>   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"
 }
 },
</code></pre>
</li>
</ol>
<p>and:</p>
<pre><code>  // 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
      }
    }
  },
</code></pre>
<p>7.Boom. Done! Go enjoy a chocolate bar or something, you’ve now got <a href="http://Bulma.io" rel="noopener nofollow ugc">Bulma.io</a> running on your   phoenix site!</p>
<p>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!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="60401" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/brunch-config-instructions-for-bulma/9654/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-60401" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="60401"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="61912" data-post-id="61912">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="EssenceOfChaos" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/EssenceOfChaos/120/6397_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  EssenceOfChaos
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Here is a simpler set up for using different front-end frameworks.</p>
<p>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 <a href="https://www.youtube.com/watch?v=iXrFNW9D4Kc" rel="noopener nofollow ugc">here</a>. If you like it please give it a thumbs up!</p>
<p>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”.</p>
<p>As mentioned, add the sass plugin to the plugins section of brunch config, specifying any paths that should be included. This would be like</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">sass: {
            options: {
                includePaths: [
                    "node_modules/bootstrap/scss",
                    "node_modules/font-awesome/fonts"
                ]
            }
</code></pre>
<p>This works for bootstrap, foundation, and other frameworks that use scss.</p>
<p>With this setup, you can create as many stylesheets as needed, prepend them with underscores ( _ ) as in, _variables.scss and <span class="mention">@import</span> them into your main stylesheet app.scss.</p>
<p>Hope this helps someone!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="61912" data-batch-url="/posts/batch_likers">
                        4
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/brunch-config-instructions-for-bulma/9654/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-61912" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="61912"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 3 liked posts in this thread!"></div>
  </section>
</div>
    <div class="postbit" id="83312" data-post-id="83312">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="greenz1" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  greenz1
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Nice tutorial for getting started and of course getting instructions for using some other UI framework</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="83312" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/brunch-config-instructions-for-bulma/9654/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-83312" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="83312"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>