Vuetify: [Bug Report] customProperties don't work

[MrJmpl3]

Environment

Vuetify Version: 2.1.3
Last working version: 2.0.11
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.120
OS: Windows 10

Steps to reproduce

Like the documentation

Expected Behavior

customProperties generated the CSS like text--primary, etc

Actual Behavior

Don't generate the CSS

Reproduction Link

https://codesandbox.io/s/vue

Other comments

I check version to version , find the version where start broken is: 2.0.12

[MrJmpl3]

Debugging all night, i see. The problem in vue-cli and vue-cli-vuetify-plugin is when you import Vue-Meta but never use the metaInfo function.

[kmrmshk]

@MrJmpl3
Thanks a lot for your pointing.
I've solved problems about customProperties by removing the codes for vue-meta in my sources.

[MrJmpl3]

@MrJmpl3
Thanks a lot for your pointing.
I've solved problems about customProperties by removing the codes for vue-meta in my sources.

Maybe, The new version of Vuetify can fix this problem: https://github.com/vuetifyjs/vuetify/releases/tag/v2.1.6

I have not tried it yet

[jacekkarczmarczyk]

This issue is being closed due to:

• [x] Reproduction environment not provided (inactivity for 14 days)
• [ ] Requested information not provided (inactivity for 14 days)
• [ ] Violation of the Code of Conduct

[IOIIOOIO]

I am having the same issue. We are using VueMeta, but we are using the metaInfo function. We can't do without the VueMeta stuff so removing it is not an option.

"vue" : "2.6.11",
"vue-meta": "2.3.3",
"vuetify": "2.2.17",

vuetify.js:

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
    icons: {
        iconfont: 'fa'
    },
    theme: {
        dark: true,
        themes: {
            options: {
                customProperties: true,
            },
            dark: {
                primary: '#24e949',
                secondary: '#ed145b',
            }
        },
    },
});

in my component:

<style lang="scss">
    .test {
        color: var(--v-primary-base);
    }
</style>

[IOIIOOIO]

To test, I have commented out the VueMeta import in main.js but still not working

[jacekkarczmarczyk]

options should be in theme, not in themes

[IOIIOOIO]

Oh man, I feel sheepish. Thanks!