CODEWITHSUNDEEP
vue.jsvue-cli
sqwk
sqwk

Reputation: 2699

Use external stylesheet for Vue web component / Prevent inlining styles

I am using an vue-cli-service to build a web component. All styles referenced in this component are always inlined into the javascript file.

vue-cli-service build --target wc --name component-name  --inline-vue  ./src/components/someComponent.vue

Is there a way to force Vue to pull out component CSS into a separate file instead of inlining it into the dist/component-name.js file?

Alternatively, is there an easy way to allow external users to override the Shadow DOM styles?

Upvotes: 0

Views: 1680

Answers (1)

Jordan
Jordan

Reputation: 2371

Unfortunately I don't believe there's an automated way to do this without writing a custom webpack plugin. You're going to have to migrate the CSS manually.

If you're using webpack, you can take all your component CSS and move it into a separate file.

From there, you can include it in your main.js file using either a require or an import:

import './css/styles.css';

If you're not using webpack or you want to include CSS files only in specific components then you can import the file within the component itself.

Simply create a <style> block and import the CSS within it:

<style>
  @import './css/styles.css';
</style>

You could use this <style> block approach globally too by adding it to your App.vue file.

Upvotes: 2

Related Questions