issse with less file import (will move to top)

[broven]

case

import React, { Component } from 'react';
....
... a lots of js import
...
import './index.less';

expect

import React, { Component } from 'react';
....
... a lots of js import
...
import './index.less';

actualy

import './index.less';
import React, { Component } from 'react';
....
... a lots of js import
...

every other import are sorted perfectly. but it move the relative less import to top, that is unexpected

[daidodo]

@broven, have you tried to define a separate group for index.less and put it in the end?

[cdeutsch]

@broven did you figure this out? I'm running into the same thing.

have you tried to define a separate group for index.less and put it in the end?

I've tried over a dozen rule combinations and can't find one that works.

import './Hello.css'; always ends up at the top.

Do you have an example that works?

"rules": [
  {
    "regex": "\\.css$",
    "orderLevel": 40
  },
  {
    "type": "importMember",
    "regex": "^$",
    "orderLevel": 10,
    "disableSort": true
  },
  {
    "regex": "^$",
    "orderLevel": 20
  },
  {
    "regex": "^[.]",
    "orderLevel": 30
  }
]

[GongT]

  {
    "regex": "\\.(c|sc|le)ss$",
    "orderLevel": 40
  },

[cdeutsch]

"regex": "\\.(c|sc|le)ss$", is verified to work? Seems the same as "regex": "\\.css$", which didn't work for me.

I ended up switching to to eslint-plugin-import:

"rules": {
  "import/order": [
    "error",
    {
      "alphabetize": {
        "order": "asc",
        "caseInsensitive": true
      },
      "pathGroups": [
        {
          "pattern": "{.,..}/*.scss",
          "group": "index",
          "patternOptions": {
            "matchBase": true
          },
          "position": "after"
        }
      ],
      "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
      "newlines-between": "always"
    }
  ],
}

[rickvian]

yep, i got this issue as well, doesn't move the CSS to the top:

import { Form, message, Typography } from 'antd'
import 'antd/dist/antd.css'

 "importSorter.sortConfiguration.customOrderingRules.rules": [
    {
      "regex": "css$",
      "orderLevel": 1
    },
    {
      "regex": "^[@a-zA-Z]",
      "orderLevel": 2
    },
    {
      "regex": "^[@]",
      "orderLevel": 2
    },
    {
      "regex": "^[~]",
      "orderLevel": 30
    },
    {
      "regex": "^[..]",
      "orderLevel": 31
    },
    {
      "regex": "^[.]",
      "orderLevel": 32
    }
  ]