title: How to resolve import/no-unresolved errors with ESLint?
body: <p>I've a project on Webpack that I'm trying to setup SASS transpiling with. I believe I am fairly close, although there are issues with my configuration (<a href="https://gist.github.com/alvinteh/2c938cf83be6cd03a1ef402499ce207d" rel="nofollow noreferrer">code and details in the gist here</a>).</p>
  
  <p>Running webpack with the code as it is yields the following error:</p>
  
  <pre><code>/foobar/src/js/components/App.jsx
    6:8  error  Unable to resolve path to module '../../scss/components/app'  import/no-unresolved
  </code></pre>
  
  <p>Having spent a while on this, I noted that if I replace the <code>import 'scss/components/app'</code> line in <code>App.jsx</code> with <code>import '../../scss/components/app.scss'</code>, the transpilation works. This leads me to believe that there are two issues:</p>
  
  <ol>
  <li>My <code>resolve.root</code> Webpack configuration isn't working since relative imports work, but not absolute ones.</li>
  <li>My <code>resolve.extensions</code> Webpack configuration isn't being applied either, since I need to append the <code>.scss</code> file extension to get it working.</li>
  </ol>
  
  <p>Other notes:</p>
  
  <ul>
  <li>I'm using webpack 1.13.1.</li>
  <li>If I intentionally introduce syntax errors into the SCSS file, webpack correctly prompts me of issues with that file.</li>
  <li>I've also tried setting my <code>resolve.root</code> configuration as an array (i.e. <code>[path.resolve(__dirname, './src')]</code>) to no avail.</li>
  <li>Goal-wise, I'm hoping to achieve something similar to <a href="https://github.com/bensmithett/webpack-css-example" rel="nofollow noreferrer">this example</a>.</li>
  <li>I've tried debugging the <code>import</code> paths with <code>console-loader</code> and am getting <code>undefined</code>.</li>
  </ul>
  
  <p>Any help will be appreciated, thanks!</p>
  
  <p><strong>UPDATE</strong>:
  A friend just shared that the issue is coming not from <code>sass-loader</code>/etc., but from <code>eslint</code>. This means the nature of this question is going to be quite different (less webpack, more eslint).</p>
  
  <p>Anyway, my <code>.eslintrc</code> extends that of AirBNB's, I'm guessing I need to modify it based on the details in <a href="https://www.npmjs.com/package/eslint-plugin-import" rel="nofollow noreferrer">this plugin</a>.</p>
  
  <p>The part of interest is:</p>
  
  <pre><code>settings:
    import/ignore:
      - node_modules       # mostly CommonJS (ignored by default) 
      - \.coffee$          # fraught with parse errors 
      - \.(scss|less|css)$ # can't parse unprocessed CSS modules, either 
  </code></pre>
  
  <p>I've updated my <code>.eslintrc</code> to resemble:</p>
  
  <pre><code>{
      "extends": "airbnb",
      "settings": {
          "import/ignore": [".scss$"]
      }
  }
  </code></pre>
  
  <p>But am still getting errors. Any ideas?</p>