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-04-14 09:40:59

    CSS3实现文字描边的2种方法

    首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke     该属性是一个复合属性,可以设置文字宽度和文字描边颜色      该属性使用很简单:text-stroke:1px #f00;(1px是文字宽度,#ff是文字描边颜色)

  • 2020-04-14 09:42:47

    用 TypeScript 编写 npm 模块

    自从开始使用 Node.js 已经一年多,写的代码越多,越是觉得自己提高的越慢。想来应该有没有将单一功能的代码封装在一个独立模块,而导致代码稍微多一点就维护困难的原因。

  • 2020-04-14 09:46:25

    TypeScript 入门教程

    TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。 TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

  • 2020-04-14 09:51:03

    package.json 字段说明

    package.json 有很多字段,也有很多官方字段,我们需要知道他们的具体是做什么的才能很好的运用

  • 2020-04-14 15:35:52

    caniuse前端兼容性检查和使用

    相信大家都曾用caniuse网站查询过css、js的一些兼容性问题,并且都从它反馈的兼容性数据中获益,让我们的线上项目更加稳定、和谐的跑在用户电脑里。不过对于caniuse页面上的一些细节,我们可能会感到困惑或者模棱两可,今天就带着大家一起来重新认识caniuse这个网站,并对它的原理和细节做些探究。

  • 2020-04-15 17:00:07

    export和import的理解,这一篇问扎根就够了

    在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。