Global shared variable vue.js using vue-cli-3

Question

I have a base.scss under src/style/base.scss. This file has imports for all variables and mixins.

When I serve my project using vue-cli-3 it says unknown variable $black.

To solve it, I referred this https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders and added

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: '@import "@/style/base.scss";'
            }
        }
    }
}

to my vue.config.js

It solved the previous issue but my icons imported and used via v-icon from

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Material+Icons'>

doesn't get resolved(text is displayed instead of icons) and even vuetify styles imported using

import 'vuetify/dist/vuetify.min.css'

doesn't work.

How do I make the vuetify and icons import work?

Harsh Karanpuria Harsh Karanpuria · Accepted Answer · 2018-12-04T07:25:03

Solved the issue. It was getting imported but reset.css was getting loaded after the vuetify which in turn was overriding the styles.

Called reset.css in the beginning of index.html.

Global shared variable vue.js using vue-cli-3

1 Answers