CODEWITHSUNDEEP
javascriptwebpacksassvuejs2vue-cli-3
Kim Boender
Kim Boender

Reputation: 436

Vue CLI 3 target build lib exclude shared styling

I am currently working on a Vue.js project where i use the Vue CLI 3 to build components in lib mode like this: vue-cli-service build --no-clean --target lib --name ComponentName.vue. The components can then be used any website if registered in a Vue instance.

However, the website contains it's own stylesheets and the component too. To develop and see the actual styles applied to component i have to pull in these (shared) styles in every component i develop. Therefore they are also in the compiled stylesheets after building the component using the command stated above (vue-cli-service build).

My question: Can i exclude the (shared) styles when building the component? I can't find anything about it in the docs (https://cli.vuejs.org/). If somebody could provide the answer or a (Webpack) workaround that would be much appreciated.

Many thanks in advance!

Upvotes: 2

Views: 1811

Answers (1)

mahatmanich
mahatmanich

Reputation: 11023

I am not sure if I understand you correctly but there is an option to have these styles inline in the components itself, which would be much easier for development.

https://cli.vuejs.org/guide/build-targets.html#app

dist/myLib.css:

Extracted CSS file (can be forced into inlined by setting css: { extract: false } in vue.config.js)

Upvotes: 1

Related Questions