title: Simplify SCSS @import paths with WebPack 2
body: <p>I currently have a project setup that uses the <a href="https://github.com/webpack-contrib/sass-loader" rel="nofollow noreferrer">sass-loader</a> WebPack plugin. This means that we can easily import SCSS from node_modules using the following:</p>
  
  <pre><code>@import "~bootstrap/scss/mixins/breakpoints";
  </code></pre>
  
  <p>Is there a way I can create a shortcut like above, to make imports of my own SCSS files a bit simpler. I would like to be able to convert for example:</p>
  
  <pre><code>@import '../../../../styles/app';
  </code></pre>
  
  <p>to</p>
  
  <pre><code>@import '~styles/app';
  </code></pre>
  
  <p>or even</p>
  
  <pre><code>@import 'styles/app';
  </code></pre>
  
  <p>I currently have the following resolver settings in my webpack.config.js:</p>
  
  <pre><code>// ....
  resolve: {
      alias: {
          selectize$: path.join(__dirname, './node_modules/selectize/dist/js/selectize')
      },
      extensions: ['.ts', '.js'],
      modules: ['./node_modules']
  },
  resolveLoader: {
      modules: ['./node_modules']
  }
  //....
  </code></pre>