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' 即可全局加载样式。

Vue including global styles without repeating the styles for each component