使用 vue-cli-3 的全局共享变量 vue.js

Question

我在 src/style/base.scss 下有一个 base.scss。该文件包含所有变量和混入的导入。

当我使用 vue-cli-3 服务我的项目时，它显示未知变量 $black。

为了解决这个问题，我引用了这个 https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders 并添加了

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

给我的 vue.config.js

它解决了之前的问题，但我的图标是通过 v-icon 从

导入和使用的

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

没有得到解决（显示文本而不是图标）甚至使用

导入的 vuetify 样式

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

无效。

如何使 vuetify 和图标导入工作？

Answer 1

问题已解决。它正在导入，但 reset.css 在 vuetify 之后加载，而 vuetify 又覆盖了样式。

在 index.html 的开头调用了 reset.css。

使用 vue-cli-3 的全局共享变量 vue.js

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

vue.js

vuetify.js

vue-cli-3