ESLint import order rule - does not work with .scss files

Question

I'm using the following rule: https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md

And i have this in my config:

{
  pathGroups: [
  {
    pattern: '*.scss',
    group: 'index',
    patternOptions: { matchBase: true },
    position: 'after'
  }
}

Yet when i import something like:

import '../../styling/App.scss'

It doesn't complain about that import at the very top instead of being at the very bottom. Am i missing something here?

Answer 1

I also encountered the same problem. After some research, it seems that eslint community does not want to add auto-sorting for unassigned imports due to the fact, that they might depend on import order. That is the reason, why your snippet of pathGroups does not work, if it would be an assigned imported, it would work without problems. i.e.:

import styles from '../../styling/App.scss';

As a precaution they have added a configurable property (warnOnUnassignedImports) to warn users when imports might cause undesired outcomes if they are out of order.

The most simple solution, which I found helps is adding an additional plugin just for css import order.

Hope this helps anyone who might have encountered a similar issue.