zoukankan      html  css  js  c++  java
  • 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>

    参考链接

  • 相关阅读:
    源码分析清楚 AbstractQueuedSynchronizer
    Java 并发队列 BlockingQueue
    ReentrantLock以及AQS实现原理
    Java并发之Condition
    Java线程的6种状态及切换
    同步工具类
    Java 并发实践 — ConcurrentHashMap 与 CAS
    Java7/8 中的 HashMap 和 ConcurrentHashMap
    java HashMap、HashTable、ConcurrentHashMap区别
    Mysql的复制原理以及流程
  • 原文地址:https://www.cnblogs.com/ajaxlu/p/9086651.html
Copyright © 2011-2022 走看看