title: blueprintjs with laravel 5.2 and webpack with elixir
body: <p>based on feedback from @michael-jungo, I've rewritten this question here: <a href="https://stackoverflow.com/questions/42594792/elixir-v6-sass-loader-imports">laravel-elixir v6 sass-loader imports</a></p>
  
  <hr>
  
  <p>I'm on laravel 5.2 and want to used <a href="http://blueprintjs.com/" rel="nofollow noreferrer">blueprintjs</a> which <a href="https://github.com/palantir/blueprint/blob/master/packages/core/src/common/_font-imports.scss#L6" rel="nofollow noreferrer">uses webpack tilde alias in paths</a>, e.g. </p>
  
  <pre><code>@import "~bourbon/app/assets/stylesheets/bourbon";
  </code></pre>
  
  <p>I understand therefore that I need to use webpack rather than browserify in elixir. Laravel 5.2 doesn't ship with elixir version 6 which is where webpack support is added. I can't upgrade to laravel > 5.3 because I can't easily upgrade my php version on our production server. So I'm trying to get elixir 6 working with laravel 5.2 so that I can use webpack and set this alias so that I can use blueprint.</p>
  
  <p><strong>My Error</strong></p>
  
  <pre><code>    gulp watch
      /path/to/project/gulpfile.js:3
      Elixir.webpack.mergeConfig({
      ^
  
      TypeError: Cannot read property 'mergeConfig' of undefined
      at Object.&lt;anonymous&gt; (/Users/si/cesg/projects/mason-presentation-admin/gulpfile.js:3:23)
      at Module._compile (module.js:571:32)
      at Object.Module._extensions..js (module.js:580:10)
      at Module.load (module.js:488:32)
      at tryModuleLoad (module.js:447:12)
      at Function.Module._load (module.js:439:3)
      at Module.require (module.js:498:17)
      at require (internal/module.js:20:19)
      at execute (/usr/local/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/index.js:24:18)
      at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp-cli/index.js:149:63)
  </code></pre>
  
  <p><strong>gulpfile.js</strong></p>
  
  <pre><code>    var elixir = require('laravel-elixir');
  
      Elixir.webpack.mergeConfig({
          alias: {'~': path.resolve(__dirname)}
      });
  
      elixir(function(mix) {
          mix.sass('app.scss');
          mix.webpack('index.js');
          mix.version(['css/app.css', 'js/index.js']);
      });
  </code></pre>
  
  <p>You can see that without the mergeConfig block I get issues with the unrecognised ~ alias in blueprintjs </p>
  
  <pre><code>    { Error: node_modules/@blueprintjs/core/src/common/_font-imports.scss
          Error: File to import not found or unreadable: ~bourbon/app/assets/stylesheets/bourbon
  </code></pre>
  
  <p>with the following scss</p>
  
  <pre><code>    $icon-font-path: "~@blueprintjs/core/resources/icons";
      @import "node_modules/@blueprintjs/core/src/blueprint.scss";
  </code></pre>
  
  <p><strong>for reference, here's my package.json</strong></p>
  
  <pre><code>{
    "private": true,
    "scripts": {
      "prod": "gulp --production",
      "dev": "gulp watch"
    },
    "devDependencies": {
      "bootstrap-sass": "^3.3.0",
      "gulp": "^3.9.1",
      "laravel-elixir": "6.0.0-15",
      "laravel-elixir-webpack-official": "^1.0.10"
    },
    "dependencies": {
      "@blueprintjs/core": "^1.10.0",
      "axios": "^0.15.3",
      "babel-plugin-transform-object-rest-spread": "^6.20.2",
      "babel-preset-es2015": "^6.22.0",
      "babel-preset-react": "^6.22.0",
      "bootstrap": "^3.3.7",
      "bourbon": "^4.3.3",
      "form-serialize": "^0.7.1",
      "history": "^3.0.0",
      "immutability-helper": "^2.1.0",
      "normalize-scss": "^6.0.0",
      "pluralize": "^3.1.0",
      "query-string": "^4.3.2",
      "react": "^15.4.0",
      "react-addons-create-fragment": "^15.4.2",
      "react-addons-css-transition-group": "^15.4.2",
      "react-bootstrap": "^0.30.7",
      "react-confirm": "^0.1.14",
      "react-dom": "^15.4.0",
      "react-global-configuration": "^1.0.1",
      "react-paginate": "^4.1.1",
      "react-redux": "^4.4.6",
      "react-router": "^3.0.0",
      "react-router-redux": "^4.0.7",
      "redux": "^3.6.0",
      "redux-thunk": "^2.1.0",
      "spinkit": "^1.2.5"
    }
  }
  </code></pre>