Skip to content

Vuetify integration with custom SASS variables #59

@mariadb-ThienLy

Description

@mariadb-ThienLy

Hi, thank you for creating the library.
I'm exploring the possibility of turning a Vue 3 app built on Vuetify components into a web component, but I'm running into an issue with custom SASS variables.

From the demo example, it looks like it imports Vuetify's default styles (vuetify/dist/vuetify.min.css). I've been trying to find a way to apply custom SASS variables, but I haven't had any success so far.
Reproducible example:
https://stackblitz.com/~/github.com/mariadb-ThienLy/vuetify-web-component-wrapper?file=src/styles/settings.scss

Do you have any ideas on how to achieve this?

Currently my workaround is to manually import sass files.

@use './settings.scss';
@use 'vuetify/lib/styles/main.sass';
@use 'vuetify/lib/components/VApp/VApp.sass';
@use 'vuetify/lib/components/VProgressLinear/VProgressLinear.sass';
@use 'vuetify/lib/components/VSheet/VSheet.sass';
@use 'vuetify/lib/components/VBtn/VBtn.sass';
@use 'vuetify/lib/components/VSelect/VSelect.sass';
@use 'vuetify/lib/components/VTextField/VTextField.sass';
@use 'vuetify/lib/components/VTooltip/VTooltip.sass';
@use 'vuetify/lib/components/VMenu/VMenu.sass';
@use 'vuetify/lib/components/VIcon/VIcon.sass';
@use 'vuetify/lib/components/VDialog/VDialog.sass';
@use 'vuetify/lib/components/VCard/VCard.sass';
@use 'vuetify/lib/components/VDivider/VDivider.sass';
@use 'vuetify/lib/components/VBtnToggle/VBtnToggle.sass';
@use 'vuetify/lib/components/VBtnGroup/VBtnGroup.sass';
@use 'vuetify/lib/components/VProgressCircular/VProgressCircular.sass';
@use 'vuetify/lib/components/VList/VList.sass';
@use 'vuetify/lib/components/VAvatar/VAvatar.sass';
@use 'vuetify/lib/components/VImg/VImg.sass';
@use 'vuetify/lib/components/VResponsive/VResponsive.sass';
@use 'vuetify/lib/components/VOverlay/VOverlay.sass';
@use 'vuetify/lib/components/VField/VField.sass';
@use 'vuetify/lib/components/VInput/VInput.sass';
@use 'vuetify/lib/components/VMessages/VMessages.sass';
@use 'vuetify/lib/components/VLabel/VLabel.sass';
@use 'vuetify/lib/components/VCheckbox/VCheckbox.sass';
@use 'vuetify/lib/components/VSelectionControl/VSelectionControl.sass';
@use 'vuetify/lib/components/VSelectionControlGroup/VSelectionControlGroup.sass';
@use 'vuetify/lib/components/VChip/VChip.sass';
@use 'vuetify/lib/components/VChipGroup/VChipGroup.sass';
@use 'vuetify/lib/components/VSlideGroup/VSlideGroup.sass';
@use 'vuetify/lib/components/VCounter/VCounter.sass';
@use 'vuetify/lib/components/VVirtualScroll/VVirtualScroll.sass';

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions