How to resolve import/no-unresolved errors with ESLint?

Question

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 (code and details in the gist here).

Running webpack with the code as it is yields the following error:

/foobar/src/js/components/App.jsx
  6:8  error  Unable to resolve path to module '../../scss/components/app'  import/no-unresolved

Having spent a while on this, I noted that if I replace the import 'scss/components/app' line in App.jsx with import '../../scss/components/app.scss', the transpilation works. This leads me to believe that there are two issues:

1. My resolve.root Webpack configuration isn't working since relative imports work, but not absolute ones.
2. My resolve.extensions Webpack configuration isn't being applied either, since I need to append the .scss file extension to get it working.

Other notes:

• I'm using webpack 1.13.1.
• If I intentionally introduce syntax errors into the SCSS file, webpack correctly prompts me of issues with that file.
• I've also tried setting my resolve.root configuration as an array (i.e. [path.resolve(__dirname, './src')]) to no avail.
• Goal-wise, I'm hoping to achieve something similar to this example.
• I've tried debugging the import paths with console-loader and am getting undefined.

Any help will be appreciated, thanks!

UPDATE: A friend just shared that the issue is coming not from sass-loader/etc., but from eslint. This means the nature of this question is going to be quite different (less webpack, more eslint).

Anyway, my .eslintrc extends that of AirBNB's, I'm guessing I need to modify it based on the details in this plugin.

The part of interest is:

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 

I've updated my .eslintrc to resemble:

{
    "extends": "airbnb",
    "settings": {
        "import/ignore": [".scss$"]
    }
}

But am still getting errors. Any ideas?

Answer 1

Can you post all the files in the gist? I tried looking for issues just by looking at the code but a runnable example with all files and imports in webpack config would be more helpful.

I'm curious why you added eslint to loaders instead of preloaders. You need to add it to preloaders.