How can I configure @trivago/prettier-plugin-sort-imports to always place .css/.scss imports at the bottom?

To fix the ordering issue, you need to ensure that your rules for non-CSS imports explicitly exclude CSS/SCSS files. In your current configuration the first rule

"^@?\\w"

matches imports like 'bootstrap/dist/css/bootstrap.min.css' because it doesn’t exclude CSS extensions. The solution is to add a negative lookahead to the problematic rules so that they won’t match when the import path ends in .css or .scss.

For example, update your .prettierrc with negative lookaheads on the first two rules:

JSONCopied
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "importOrder": [
    "^(?!.*\\.(css|scss)$)@?\\w",
    "^(?!.*\\.(css|scss)$)@/",
    "^[./](?!.*\\.(css|scss)$)",
    ".*\\.(css|scss)$"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "plugins": ["@trivago/prettier-plugin-sort-imports"]
}

Explanation

• The regex "^(?!.*\\.(css|scss)$)@?\\w" ensures that any import starting with an optional @ followed by a word character will only match if the string does not end with .css or .scss.
• The same logic is applied to the second rule "^(?!.*\\.(css|scss)$)@/".
• The third rule already excludes CSS/SCSS files.
• The last rule, ".*\\.(css|scss)$", catches all CSS/SCSS imports and places them at the bottom.

This change ensures that an import like 'bootstrap/dist/css/bootstrap.min.css' is matched by the CSS-specific rule and appears at the bottom of the list.