Vue-cli how to set up postcss?

Question

Sass

1. I create a project through Vue-cli using the webpack template
2. What do I want to get? ---- Write styles in SASS using PostCSS
3. I create a styles folder and put all my sass styles there (one main file includes all files with styles through the include)
4. Then I include this file in main.js. Like this 5. I set this config in the .postcssrc.js file
import styles from './style.css';

module.exports = {
    "syntax": 'postcss-scss',
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        // to edit target browsers: use "browserslist" field in package.json
        "autoprefixer": {}
    }
}

6. PROBLEM. The text of the file with styles is inserted into the page without processing

As you can see, the sass variables were not compiled.
The question is how to organize work with SASS in the Vue-cli webpack template so that only one main SASS file with styles would be included in main.js?