使用Vue CLI和Vuetify导入全局scs变量

Question

通过将全局scss文件导入我的项目时

1. 导入到main.js，不允许我使用我定义的变量，但类和id可以工作
2. 导入到App.vue，根本没有加载任何样式。我当然去掉了scoped
3. 导入vue.config.js，如下所示

module.exports = {
transpileDependencies: [
'vuetify'
],
css: {
loaderOptions: {
sass: {
prependData: '@import "@/scss/_variables.scss";'
}
}
}
}

破坏了我的整个应用程序，并在cmd-rel.toVuetify中给了我很多错误。

有人能告诉我如何将全局scs导入到使用最新Vue CLI和Vuetify制作的SPA中吗？

Answer 1

您不需要显式导入变量。根据官方文件https://vuetifyjs.com/en/customization/sass-variablesvue-cli-plugin-vuetify自己做这件事。要使用全局变量，只需遵循以下简单步骤即可。

1. 使用命令vue add vuetify添加Vuetify这将自动添加所有必需的依赖项，如vuetify-loader, vue-cli-plugin-vuetify等
2. 在src/{scss, sass or styles}目录中创建一个variables.scss文件。因为这些是全局变量的默认目录示例变量文件
3. 运行服务器，您就可以开始了

Answer 2

一般来说，这似乎现在起作用了：

// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: '@import "~@/assets/scss/_variables.scss";'
}
}
}
}