Eslint-plugin-import: eslint (and sublime-linter-eslint) cannot resolve .scss files

[zhirzh]

Folder structure

src/
|-- styles/
|   |-- foo.scss
|
|-- containers/
|   |-- Foo.jsx
|
|-- modules/
    |-- foo.js

Foo.jsx

import styles from 'styles/foo'; <--- error: import/extensions: Missing file extension "scss" for "styles/foo" 
import styles from 'modules/foo'; <--- no errors
...

webpack.config.js

{
  ...
  resolve: {
    extensions: ['', '.js', '.jsx', '.scss'],
    modulesDirectories: [
      path.resolve(__dirname, 'src'),
    ],
  },
}

package.json

"devDependencies": {
  ...
  "babel-eslint": "^7.1.1",
  "eslint": "^3.12.2",
  "eslint-config-airbnb": "^13.0.0",
  "eslint-import-resolver-webpack": "^0.8.0",
  "eslint-plugin-import": "^2.2.0",
  "eslint-plugin-jsx-a11y": "^2.2.3",
  "eslint-plugin-react": "^6.8.0",
  "extract-text-webpack-plugin": "^1.0.1",
}

.eslintrc

{
  "parser": "babel-eslint",

  "extends": "airbnb",

  "plugins": [
    "react",
    "jsx-a11y",
    "import"
],

  "rules": {
    "no-param-reassign": 0,
    "react/prop-types": 0
  },

  "settings": {
    "import/resolver": "webpack"
  }
}

[soryy708]

I don't see why you'd need to import scss files in jsx.
import is used for importing other ecmascript files, not styles.

[ljharb]

@soryy708 it's done so that bundlers (webpack) know when to include the relevant styles, and can link them together.

[ljharb]

You have to configure your extensions setting as well.

[ghbakhtiari]

@ljharb Can you please explain a bit more on what needs to be added to the settings?

I'm having the same problem with just the scss files!

// webpack config:
resolve: {
    extensions: ['.js', '.jsx', '.scss'],
    alias: {
      // aliases...
    },
  },

// .eslintrc
{
  "extends": [
    "eslint:recommended",
    "airbnb"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "webpack.conf.js"
      }
    }
  }
}



md5-c3f4dec62ca9fdc136679ea64343f43e



 error  Missing file extension "scss" for "./App.styles"  import/extensions

Isn't the whole idea of defining webpack config as the import/resolver setting to prevent repeating the same settings in the eslint configs (for resolve and its options including aliases and extensions)?

[ghbakhtiari]

Ok, found the problem!
It wasn't related to the "import/resolver"'s settings.
It's the expected behavior of the "import/extensions" rule. Because I was using the airbnb settings, and their rule only includes js, mjs and jsx:

    'import/extensions': ['error', 'ignorePackages', {
      js: 'never',
      mjs: 'never',
      jsx: 'never',
    }],

So I had to add scss's rule to my own .eslintrc...

    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "mjs": "never",
        "jsx": "never",
        "scss": "never"
      }
    ]