SCSS variables are not being translated or couldn't import extra scss file in an scss file which is imported into vue component



I read before beginning

Steps I did

I just begin writing components library according to
When I finish writing and build I couldn’t use library then I looked into js and css files. Unfortuantely, I see the SCSS variables in CSS file.

I have wrapper JS and imported components.
I use installing method of plugin.
Then exported.

I’ve src/components/component/component.vue and src/components/component.scss.
I imorted SCSS file in the component like this:

[@import]( "./component.scss"

What is expected?

Seeing SCSS variables as CSS variables.

What is actually happening?

Seeing SCSS variables in CSS.

I think there is something small to do again. But what? I think answer should be simple and I am missing something in my opinion.
FYI: I add sass-loader, css-loader, svg-loader, node-sass already.

And …

I found what’s being here. I think this is because the component.scss file.
I imported another SCCS file into it to use some variables, mixins and styles.

I imported it like below

@import '../../assets/style-mixins/global-mixin.scss';
and used a mixin and variable from it like this:

.some-heading {
    @include no-heading-defaults;
    padding: 12px 25px;
    color: white;

.bg-primary {
    background:  $primary;

But the terminal is saying:

 ERROR  Build failed with errors.
then I looked for another error and get this:

Module build failed (from C:/Users/marko/AppData/Local/Yarn/Data/global/node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: no mixin named no-btn-style
        on line 3 of src/components/button/button.scss
        from line 50 of E:\Projects\sof-ui\src\components\button\button.vue
>>     @include no-btn-style;

    at C:\Users\marko\AppData\Local\Yarn\Data\global\node_modules\webpack\lib\NormalModule.js:316:20
    at C:\Users\marko\AppData\Local\Yarn\Data\global\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\marko\AppData\Local\Yarn\Data\global\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Users\marko\AppData\Local\Yarn\Data\global\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.callback (E:\Projects\sof-ui\node_modules\sass-loader\dist\index.js:73:7)       
    at Object.done [as callback] (E:\Projects\sof-ui\node_modules\neo-async\async.js:8067:18) 
    at options.error (E:\Projects\sof-ui\node_modules\node-sass\lib\index.js:294:32

Why this may happen? Why it is saying @include no-btn-style; is incorrect? Maybe not seeing the imported SCSS file?