资讯专栏INFORMATION COLUMN

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

yedf / 1470人阅读

摘要:并不是引入代码到里面,而是发起新的请求获得样式资源,并且没有加我们只需把改成引入外部样式,就可以解决样式是全局的问题整体代码如下参考链接技术文档

问题描述

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






Add "scoped" attribute to limit CSS to this component only

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

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

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

我们只需把@import改成引入外部样式,就可以解决样式是全局的问题

整体代码如下:






参考链接

MDN Web技术文档 @import

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112964.html

相关文章

  • Vue学习笔记之vue-cli项目搭建及解析

    摘要:样式通过标签包裹,默认是影响全局的,如需定义作用域只在该组件下起作用,需在标签上加,如要引入外部文件,首先需给项目安装依赖包,打开,进入项目目录,输入回车。 showImg(https://segmentfault.com/img/remote/1460000013235090); (一)安装node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/...

    Caizhenhao 评论0 收藏0
  • 前端笔试题面试题记录(下)

    摘要:前言接上篇前端笔试题面试题记录上。默认值,不脱离文档流,,,,等属性不生效。。不脱离文档流,依据自身位置进行偏离,当子元素设置,将依据它进行偏离。。 前言 接上篇前端笔试题面试题记录(上)。趁清明小长假,把上篇剩下的部分也写一下,因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了,应该还是有些小伙伴在找工作,时间还不算太晚,希望本篇可以帮到这些小伙伴。 个人博客了解一下:obkoro...

    Lin_YT 评论0 收藏0
  • 前端笔试题面试题记录(下)

    摘要:前言接上篇前端笔试题面试题记录上。默认值,不脱离文档流,,,,等属性不生效。。不脱离文档流,依据自身位置进行偏离,当子元素设置,将依据它进行偏离。。 前言 接上篇前端笔试题面试题记录(上)。趁清明小长假,把上篇剩下的部分也写一下,因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了,应该还是有些小伙伴在找工作,时间还不算太晚,希望本篇可以帮到这些小伙伴。 个人博客了解一下:obkoro...

    suemi 评论0 收藏0
  • 面试知识点总结

    摘要:最近面试几家前端职位,想知道目前的前端面试题是偏向哪一块,都主要问到的是语法,闭包,原型链,继承那一块。并且将面试题的知识点汇总一下。参考网站面试题图片过多的时候如何优化图标很多的时候可以用雪碧图图片过大时候可以压缩一下。 最近面试几家前端职位,想知道目前的前端面试题是偏向哪一块,都主要问到的是ES6语法,闭包,原型链,继承那一块。并且将面试题的知识点汇总一下。有助于下次面试。 1.H...

    王晗 评论0 收藏0
  • 面试知识点总结

    摘要:最近面试几家前端职位,想知道目前的前端面试题是偏向哪一块,都主要问到的是语法,闭包,原型链,继承那一块。并且将面试题的知识点汇总一下。参考网站面试题图片过多的时候如何优化图标很多的时候可以用雪碧图图片过大时候可以压缩一下。 最近面试几家前端职位,想知道目前的前端面试题是偏向哪一块,都主要问到的是ES6语法,闭包,原型链,继承那一块。并且将面试题的知识点汇总一下。有助于下次面试。 1.H...

    CrazyCodes 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<