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

Question

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

1. import into main.js，没有让我使用我定义的变量，但是类和 id 可以工作。
2. import into App.vue，根本没有加载任何样式。我scoped当然删除了
3. 导入vue.config.js如下

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

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

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

Answer 1

您不需要显式导入变量。根据官方文档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. 运行服务器，你准备好了。

Answer 2

一般来说，这现在似乎有效：

// vue.config.js

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