Hola, tengo una situación en la que css y scss no se aplican de un componente de 1 app en otra app

tengo 2 aplicaciones

1. centro
2. complementos

quiero usar los componentes de una aplicación core en la aplicación de plugins

así es como lo estoy haciendo

Aplicación principal

 //main.js import "bootstrap/dist/css/bootstrap.min.css"; const app1 = new Vue({ render: h => h(App), .... }) //core.component.vue <template> ..... </template> <script> export default{ name:'CoreComponent', .... } </script> <styles lang="scss" scoped> $bgColor:red; <--- these css are not applied when used in app 2 ... <--- these css are not applied when used in app 2 </styles>

Core proporciona mapeadores de componentes para proporcionar componentes cuando se solicita a los plugins .

 //core-component-mapper.js export default{ CoreComponent: require('path/CoreComponent.vue').default, }

Debajo de la configuración de la aplicación de mis plugins

 import "bootstrap/dist/css/bootstrap.min.css"; import CoreComponentMapper 'path/core-component-mapper.js' const app2 = new Vue({ render: h => h(App), components:{ FirstCoreComp: CoreComponentMapper.CoreComponent, }, })

Nota: ignore cualquier error en mi código de demostración, el código funciona perfectamente en mi configuración, excepto que no se aplica user defined css

Pregunta: cualquiera que sea el css definido en el component de la app 1 , es decir, el core por mí, no se aplica cuando se usa en la App 2 , es decir, los plugins

Nota: no configuré ninguna configuración webpack , supongo que mi aplicación vue está usando la configuración predeterminada vue-loader

Lo interesante es que bootstrap css funciona, no sé por qué (se usa en ambas apps )

@MatJ como pediste en uno de tus comentarios, adjunto una captura de pantalla ( según yo, los css no se fusionan, pero los css en línea se aplican bien )

Por favor ayúdenme gracias de antemano!!