Как подключить общий sass файл в проект vue3?

Question

[Intelix]

Здравствуйте!
Есть файл main.sass в @/assets/styles/
Внутри шаблон:

%defaultFlex
  display: flex
  align-items: center
  justify-content: center

Создал vue.config.js с таким содержанием:

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: '@import "@/assets/styles/main.sass"'
            }
        }
    }
};

"sass-loader": "^10.4.1",
"node-sass": "^8.0.0",

Пытаюсь в одном из компонентов использовать шаблон @extend defaultFlex

При сборке возникает ошибка:

Error

in ./src/components/app/headerBar.vue?vue&type=style&index=0&id=d8ae4810&scoped=true&lang=sass

Syntax Error: SassError: ".user .ava" failed to @extend "defaultFlex".
       The selector "defaultFlex" was not found.
       Use "@extend defaultFlex !optional" if the extend should be able to fail.
        on line 19 of src/components/app/headerBar.vue
>>     @extend defaultFlex;

   ------------^



 @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/app/headerBar.vue?vue&type=style&index=0&id=d8ae4810&scoped=true&lang=sass 4:14-476 15:3-20:5 16:22-484
 @ ./src/components/app/headerBar.vue?vue&type=style&index=0&id=d8ae4810&scoped=true&lang=sass
 @ ./src/components/app/headerBar.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/layouts/mainLayout.vue?vue&type=script&lang=js
 @ ./src/layouts/mainLayout.vue?vue&type=script&lang=js
 @ ./src/layouts/mainLayout.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.67:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Подскажите пожалуйста что не так, как починить?

Comments

[imko]

% пропущен?)