关于vue全局样式

Posted 2023-03-16

参考技术A 我知道的有两种方法：
①css作用域
不加 scoped 就是代表里面的css样式能影响全局。

然后我这么做的时候
先看我引用这个样式的vue文件目录。里面装的是不同的页面哦。

在Home页写全局样式，的确实可以影响全局的。
但是带来的问题就是：
当我们通过home页的导航进入其他页面的话，样式是没有问题的。
但是通过url进去的话，布局是乱的，没有引入这些全局样式。
因为他没有加载到home页吧。

所以这种方式比较适合用在home页里面的组件，而不适用于跨页面。何必呢？如果碰上同名，他还会影响其他的页面。

所以看第二种方式引入全局样式吧
②写一个全局样式文件，在 main.js 中引入。完美解决！

如何隔离 Vuetify 全局样式

【中文标题】如何隔离 Vuetify 全局样式

【英文标题】：How to isolate Vuetify global styles

【发布时间】：2019-06-09 14:51:40

【问题描述】：

我已经开始在一个旧的现有项目中使用 Vue.js 和 Vuetify。所以我没有重写所有的前端，我只是导入了 Vue 并替换了一些部分。

然后我注意到一个非常出乎意料的行为 - Vuetify 具有通用类的全局样式，如 .title 并且它影响整个页面，而不仅仅是 Vue 部分。

那么，问题是，如何在 Vue 组件中隔离 vuetify 样式？

---

UPD：按照@DigitalDrifter 的建议，我尝试使用stylus 块级导入。所以我删除了

import 'vuetify/dist/vuetify.min.css' 

来自main.js 并创建了一个新的.styl 文件（它被导入而不是css），其内容如下：

.vuetify-styles
    @import '~vuetify/src/stylus/main'

然后将这个类添加到根组件中：<App class="vuetify-styles">

UPD2： 之后你可以得到与stylus 编译相关的错误。更多相关信息 -> https://github.com/vuetifyjs/vuetify/issues/4864

UPD3： less 也适合我。

# vuetify-styles.less
.vuetify-styles 
  @import (less) '../../node_modules/vuetify/dist/vuetify.min.css';

然后将其导入您的main.js

import './vuetify-styles.less'

【问题讨论】：

“隔离”是什么意思？

我的意思是为 vuetify.min.css 创建类似命名空间的东西，为所有样式和其他与 vue 相关的样式创建根类

【参考方案1】：

Stylus 支持block level imports。

如果您有以下情况：

// bar.styl
.bar
  width 10px

// foo.styl
.foo
  @import 'bar.styl'

最终结果将是：

.foo .bar 
  width: 10px;

【讨论】：

谢谢，它看起来像一个解决方案！