Vue style里面使用@import引入外部css, 作用域是全局的解决方案

2020-05-06 18:46:06

错误的做法

<style>

@import "../static/css/user.css";

</style>

正确的做法


我们只需把@import改成<style src=""></style>引入外部样式,就可以解决样式是全局的问题

参考地址 Vue style里面使用@import引入外部css, 作用域是全局的解决方案

使用@import引入外部css,作用域却是全局的

<template></template><script>
    export default {        name: "user"
    };</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>@import "../static/css/user.css";.user-content{  background-color: #3982e5;
}</style>
Add "scoped" attribute to limit CSS to this component only

这句话大家应该是见多了, 我也使用scoped, 但是使用@import引入外部样式表作用域依然是全局的,看了一遍@import的规则后, 进行初步猜测,难道是@import引入外部样式表错过了scoped style?

又回想到此前看过的前端性能优化文章里面都有提到,在生产环境中不要使用@import引入css,因为在请求到的css中含有@import引入css的话,会发起请求把@import的css引进来,多次请求浪费不必要的资源。

@import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped

<style scoped>@import "../static/css/user.css";</style>

我们只需把@import改成<style src=""></style>引入外部样式,就可以解决样式是全局的问题

<style scoped src="../static/css/user.css"><style scoped>.user-content{  background-color: #3982e5;
}</style>

整体代码如下:

<template></template><script>
    export default {        name: "user"
    };</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped src="../static/css/user.css"><style scoped>.user-content{  background-color: #3982e5;
}</style>


  • 2020-11-17 17:28:06

    AssemblyScript 开发WebAssembly 教程

    WebAssembly 以及通过 AssemblyScript 的扩展,不会使每个网站都神奇地变得更快,但是这并不重要。 WebAssembly 之所以令人兴奋,是因为它可以使更多的应用在 Web 变得中可行。

  • 2020-11-17 21:15:48

    如何保障 API 接口的安全性?前端如何加密

    一、1. HTTP 请求中的来源识别 二、2. 数据加密 三、3. 数据签名 四、4. 时间戳 五、5. AppID 六、6. 参数整体加密 七、7. 限流 八、8. 黑名单 九、1. 压缩 十、2. 混淆 undefined、3. 加密

  • 2020-11-18 14:34:00

    当你写爬虫抓不到APP请求包的时候该怎么办?

    提示:因为高级篇以后的APP将无法使用很通用的方式处理,每种类型甚至是每个APP的反抓包处理方式都会有差别,所以这个系列以后会以【高级篇-具体类型】的形式来写。

  • 2020-11-21 20:41:51

    Kotlin Sealed class类详解

    Sealed class(密封类) 是一个有特定数量子类的类,看上去和枚举有点类似,所不同的是,在枚举中,我们每个类型只有一个对象(实例);而在密封类中,同一个类可以拥有几个对象。

  • 2020-11-22 20:53:43

    Dagger2之Kotlin写法

    修饰构造方法 修饰变量,在宿主类里,引入要注入的实例

  • 2020-11-22 20:56:13

    Dagger2使用详解

    简单的说,就是一个工厂模式,由Dagger负责创建工厂,帮忙生产instance。遵从Java规范JSR 330,可以使用这些注解。现在不研究Dagger2是如何根据注解去生成工厂的,先来看看工厂是什么东西,理解为什么可以实现了DI(Dependency Injection),如何创建IoC(Inverse of Control)容器。

  • 2020-11-22 21:00:28

    dagger.android--Fragment,BaseFragment

    1 使用Fragment参数来代替Activity参数 2 使用 @FragmentKey来代替@ActivityKey 3 使用HasFragmentInjector来代替@HasActivityInjector 4 AndroidInjection.inject(Fragment)方法,在Fragment的onAttach()中调用,而不是在onCreate()中 5 Fragment的Module添加位置,和Activity是不同的,它取决于Fragment需要的其他依赖注入

  • 2020-11-22 21:12:30

    Dependency Injection with Dagger2,Fragment

    標註@Provides的method若有parameter的話,Dagger會找出其擁有的該型態物件來使用。我們在Module內新增了DataModel將其列入Dagger的管理下,接著在provideFactory()增加parameter變成provideFactory(DataModel dataModel),Dagger就會找出其管理的DataModel給provideFactory使用。