chat-gpt:

### Handling `@import` Issues in `common.less`

#### Problem

You have a `common.less` file with:

```less

@import '../../../template/css/common.css';

@import (reference) 'default.less';

/**

 * Overwrite default styles

 */

/* body */

a {

  color: rgba(30, 140, 240, 1); 

}

a:hover {

  color: rgba(10, 120, 220, 1); 

}

.sys-icon:not(.sys-colored),

.sys-icon-a {

  color: rgba(30, 140, 240, 1);

}

```

The issue is that the CSS import and Less import are not handled correctly, leading to `@import` rules being ignored or misordered.

#### Solution

1. **Compile Less First:**

  Ensure that `common.less` is compiled to CSS before any concatenation occurs. This ensures the `@import` statements are processed correctly.

2. **Process Imports Properly:**

  Import CSS files at the top of your Less file and ensure that Less files are referenced correctly.

3. **Check Final Output:**

  Verify that the final CSS file correctly includes imports and that all styles are applied as expected.

### Summary

- **Compile** `common.less` to CSS before processing.

- **Ensure imports** are correctly handled in the final output.

- **Inspect final CSS** to verify correct import placement and style application.