title: Webpack and Aliases within scss @import
body: <p>Given below project structure:</p>
  
  <pre><code>|- SRC
  |-- COMMON
  |---- SCSS
  |------ GLOBAL.scss
  |------ VARIABLES.json (scss colors in json structure)
  |-- PAGES
  |---- COMPONENTS
  |------ COMPONENT A
  |-------- SCSS
  |---------- componentA.scss
  |------ COMPONENT B
  |-------- SCSS
  |---------- componentB.scss
  </code></pre>
  
  <p>I want to @import global.scss file into the single component scss files. I dont want to use relative paths, because components structure may have different nesting.</p>
  
  <p>Currently I'm using Webpack Aliases:</p>
  
  <pre><code>resolve: {
    alias: {
      common: path.resolve(__dirname, 'src/common/')
    }
  }
  </code></pre>
  
  <p>and I'm using @import 'common/scss/global.scss'; and @import 'common/scss/variables.json' and it's not working.</p>
  
  <ul>
  <li>Module build failed</li>
  <li>File to import not found or unreadable.</li>
  </ul>
  
  <p>PS. Using json-loader, sass-loader etc.</p>
  
  <p>Could you please help to find working solution of how to import JSON and SCSS without using relative '../../../../../' paths?</p>
  
  <p>THANKS!</p>