Question

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

导入main.js，不允许我使用定义的变量，但类和id有效。
导入App.vue，根本不加载任何样式。我当然删除了scoped
按以下步骤导入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本身可以执行此操作。要使用全局变量，只需遵循以下简单步骤。

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

Answer 2

通常，这现在可以正常工作：

// vue.config.js

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

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

2 个答案: