Global access to scss variables (twbs or custom)

[popovserhii]

My global scss configuration is under Layout module and has next code (simplified)

'assetic_configuration' => [
    'debug' => true,
    'buildOnRequest' => true,
    'webPath' => realpath('public/assets'),
    'basePath' => 'assets',

    'default' => [
        'assets' => ['@twbs_css'],
        'options' => ['mixin' => true],
    ],
    'modules' => [
        'twbs' => [
            'root_path' => realpath('vendor/twbs/bootstrap-sass'),
            'collections' => [
                'twbs_css' => [
                    'assets' => ['assets/stylesheets/_bootstrap.scss',],
                    'filters' => ['scss' => ['name' => \Assetic\Filter\ScssphpFilter::class]],
                    'options' => ['output' => 'twbs_css.css'],
                ],
            ],
        ],
    ]
]

I create new module Cart with next configuration

'controllers' => [
    'cart' => [
        '@cart_css',
    ],
],
'modules' => [
    'cart' => [
        'root_path' => __DIR__ . '/../view/assets',
        'collections' => [
            'cart_css' => [
                'assets' => ['scss/style.scss'],
                'filters' => ['scss' => ['name' => \Assetic\Filter\ScssphpFilter::class]],
                'options' => ['output' => 'cart_css.css'],
            ],
        ],
    ],
],

In style.scss I put simple code

header{
  height: 50px;
  background-color: $gray-base;
}

But after page reload I get error

Fatal error: Uncaught exception 'Leafo\ScssPhp\Exception\CompilerException' with message 'Undefined variable $gray-base: line: 19'
....

How can I get variables from _bootstrap.scss loaded in my Layout module?

P.S. I know this error refers to the module Leafo\ScssPhp but maybe you know how to fix it at the configuration level.

[widmogrod]

@popovsergiy unfortunately I don't know how to fix this.

[MatthiasKuehneEllerhold]

Each SCSS files is compiled separatly. You have to import the _variables.scss from bootstrap to gain access to their variables. Add this in your styles.scss:

@import "node_modules/bootstrap-sass/assets/stylesheets/variables";

(Change path as needed, it should point to node_modules/bootstrap-sass/assets/stylesheets/_variables.scss or similar).