I am new at using less. I initialized my codebase using npm create vite@latest. I have set the vite config as below:

  css: {
    preprocessorOptions: {
      less: {
        math: "always",
        relativeUrls: true,
        javascriptEnabled: true
      },
    },
  }

Here is my directory structure:

- src/
  - assets/
    - css/
      - commons.css
  - components/
    - Button.less
    - Button.tsx
  - App.css

1. In App.css, I import the commons.css from assets folder @import "/src/assets/css/commons.css";
2. In commons.css, I declare class .test { font-size: 100px }
3. I tried to apply the .test class using mixins provided by Less. So in Button.less, I use this

// @import "/src/App.css"; // I have tried to use this import to but still doesn't work.

.btn {
  .test();
  background-color: red;
}

If I remove the mixins, the background color will applied successfully, but after I implement the mixins, it shows error [plugin:vite:css] [less] .test is undefined. My questions are:

1. Can we import css to less?
2. If yes, how to do it properly?