Vue 包含全局样式而不重复每个组件的样式

Question

我有一个应用程序，并希望包含一些全局样式，我可以在应用程序的任何地方使用这些样式，如下所示：

.btn {
  ...
}

在 webpack 中，我已经为 _variables.scss 包含了诸如 $my-color: $fff 之类的东西，并且在我的 loaderOptions 中是这样连接的：

{
  additionalData: `@import "@/styles/_variables.scss";`
}

显然，对于某些全局样式，我可以做同样的事情，但是，这会导致我的样式 .btn 变成 load as many times 作为我拥有的组件。

从逻辑上讲，最好进入我的 root Vue 组件并添加全局 <style lang="scss"></style>。

然而，我正在升级一个旧的 jQuery 应用程序，它正在被零散地分割，而不是一个根应用程序组件，我有几个已转换为 Vue 的部分的根。我没有一个中心位置来加载这些样式。

例如，我有使用 searchBar 实例化的 checkout 和 Vue.extend 应用程序（因此它们都是同一个实例的一部分）。不仅有两个应用程序，还有很多。如果我在它们中的任何一个的根中包含全局样式，它......感觉......令人讨厌......

有什么办法可以解决这个问题，还是我应该在一个随机应用程序中设置全局样式，并在所有内容都移植后使用 TODO 进行重构？

理想情况下，我会用 _variables.scss 做同样的事情，但是为每个组件复制样式对我来说是一个非启动项。

Answer 1

在这种情况下，您无需担心 webpacks CSS 加载器的工作方式。

您只需进入 main.js 和 import '@/styles/globals.scss' 即可全局加载样式。