Invalid vue project css-loader configuration alias

after reading the css-loader document, I want to try
https://www.webpackjs.com/loa.
using vue-cli3 to build the project
configuration code

css: {
        loaderOptions: {
            css: {
                alias: {
                    "@css": path.join(__dirname, "src", "css"),
                }
            },
        }
    },

use in projects

<style lang="postcss" scoped>
@import "@css/common.postcss";
.wrap{
  padding: var(--common-space);
  & .contain {
    background: var(--common-background);
    padding: var(--common-fill);
  }
}
</style>

error message

 error  in ./src/views/job-management/report/completeness/index.vue?vue&type=style&index=0&id=464df02c&lang=postcss&scoped=true&

Module build failed (from ../node_modules/postcss-loader/src/index.js):
Error: Failed to find "@css/common.postcss"
  in [
    E:\\-\datamanagement\vue_project\data_quality\src\views\job-management\report\completeness
  ]
    at resolveModule.catch.catch (E:\\-\datamanagement\vue_project\node_modules\postcss-import\lib\resolve-id.js:35:13)
    at <anonymous>

skipping postcss-loader also reported an error, but the error reported was different

<style>
@import "@css/test.css";
</style>


This dependency was not found:

* -!../../../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!./@css/test.css in ../node_modules/css-loader??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./src/views/job-management/report/completeness/index.vue?vue&type=style&index=0&lang=css&

To install it, you can run: npm install --save -!../../../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!./@css/test.css

module.exports = { ... configureWebpack: () => ({ resolve: { alias: { '@css': path.join(__dirname, 'src', 'css'), } }, .... }) // <style> // ~ @import "~@css/test.css"; </style>

'postcss-import': { resolve: function (id) { let alias = { "@dq-common": path.join(__dirname, 'data_quality', 'src', 'css', 'common.postcss') } return alias[id] ? alias[id] : id; } },