Building Vue app with target "Web Component" - SCSS styling not applied?

Question

So I have a very small app I've built that I want to integrate into a website as a web component. So I build the app using vue-cli-service build --target wc --inline-vue --name name-of-component

However the SCSS styling is not included? It works fine in the live reload during development. The SCSS file is imported in the main.js file like this:

import Vue from 'vue';
import App from './App.vue';
import store from './store';
import './assets/main.scss';

Vue.config.productionTip = false;

new Vue({
    store,
    render: (h) => h(App),
}).$mount('#app');

tony19 · Accepted Answer · 2021-03-10 22:49:58Z

1

I'm not sure why, but a workaround is to import the SCSS within the <style> block instead of <script>:

<style lang="scss">
@import '~@/assets/main.scss';
</style>

answered Mar 10, 2021 at 22:49

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johan Carlberger · Accepted Answer · 2021-03-11 14:58:15Z

1

I found a solution which is a mix of importing like tony19 said:

<style lang="scss">
@import '~@/assets/main.scss';
</style>

Then using sass main.scss main.css and including a <link rel="stylesheet" href="main.css"> in the same document as the web component. That way the styling was applied correctly.

Also generally I would recommend hosting any assets such as css, fonts, images, svgs, etc. etc. on a CDN and using the full url to the asset in the web component so that you don't have to include these on the web pages using the component.

answered Mar 11, 2021 at 14:58

Johan Carlberger

1051 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

Building Vue app with target "Web Component" - SCSS styling not applied?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related