我有一个应用程序,并希望包含一些全局样式,我可以在应用程序的任何地方使用这些样式,如下所示:
.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
做同样的事情,但是为每个组件复制样式对我来说是一个非启动项。
答案 0 :(得分:0)
在这种情况下,您无需担心 webpacks CSS 加载器的工作方式。
您只需进入 main.js
和 import '@/styles/globals.scss'
即可全局加载样式。