时间戳

首页 > 解决方案 > 使用 Vue CLI 和 Vuetify 导入全局 scss 变量

vue.js - 使用 Vue CLI 和 Vuetify 导入全局 scss 变量

问题描述

通过以下方式将全局 scss 文件导入我的项目时：

  1. import into main.js，并没有让我使用我定义的变量，但类和 ids 工作。
  2. import into App.vue，根本没有加载任何样式。scoped我当然删除了
  3. 导入vue.config.js如下
module.exports = {
  transpileDependencies: [
    'vuetify'
  ],
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/scss/_variables.scss";'
      }
    }
  }
}

破坏了我的整个应用程序，并在 cmd rel 中给了我大量错误。进行验证。

谁能告诉我如何将全局 scss 导入使用最新的 Vue CLI 和 Vuetify 制作的 SPA 中？

标签： vue.jswebpacksassvuetify.js

解决方案

您不需要显式导入变量。根据官方文档https://vuetifyjs.com/en/customization/sass-variables vue-cli-plugin-vuetify自己做。要使用全局变量，只需遵循这些简单的步骤。

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

推荐阅读