Include scss in vuejs components npm package conditionally, based on conditions set in the project

Question

I am trying to create css/scss themes for my Vue Components Npm package. It's a local package which I am testing with npm link

Both Package and Project are using webpack.

index.js of Package

import "./src/sass/main.scss";
import "./src/sass/theme_a.scss"; // This needs to be inculded based on options

install(Vue, options) {
    Vue.prototype.$package = Vue.observable({ options });
    Vue.component("a-button", a_button);
    --- more ---
}

index.js of the Project

import Package from 'package'

Vue.use(Package, {
    theme: 'theme_a',
    style: 'style_a'
    --- more ---
});

new Vue({el: '#app',   render: h => h(App)});

What I want to achieve is to include specific scss theme files in index.js of Package, while set the theme for the project in index.js of the Project, in the Vue.use() function.

How can I achieve this?

Answer 1

Is there a reason you want to include the sass css code only if your button condition is true?

As a SPA this CSS code will be sent to the browser, why not just wrap with a parent class in your template?

 <template> <div:class="{ style-a: isStyleA }">...[your button html] </div> </template> <script>...[component script] </script> <style lang="scss">.style-a {...[your button component styles] } </style>