【发布时间】：2021-06-04 02:51:42
【问题描述】：
我有一个应用程序，并希望包含一些全局样式，我可以在应用程序的任何位置使用这些样式，如下所示：
.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 的部分。我没有加载这些样式的中心位置。
例如，我有使用 Vue.extend 实例化的 searchBar 和 checkout 应用程序（因此它们都是同一个实例的一部分）。不仅有两个应用程序，还有很多。如果我在其中任何一个的根目录中包含全局样式，它...感觉...恶心...
有什么办法可以解决这个问题，或者我应该在一个随机应用程序中设置全局样式，并使用 TODO 在所有内容移植完成后进行重构？
理想情况下，我会用 _variables.scss 做同样的事情，但为每个组件复制样式对我来说是不可行的。
【问题讨论】：
-
您是否尝试在 main.js 中导入？
import '@/styles/globals.css'
标签： vue.js webpack sass sass-loader