问题描述

使用@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


&lt;style scoped&gt;
@import "../static/css/user.css";
&lt;/style&gt;

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


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

整体代码如下:


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

参考链接

MDN Web技术文档 @import

原文地址:https://segmentfault.com/a/1190000012728854

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

  1. Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer

    问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...

  2. 久未更 ~ 五之 —— 引入外部CSS样式表 小节

    > > > > > 久未更 系列一:在html中引入外部css样式表 //引入外部css样式表 //<lilnk>要放在<head>标签的第一行, ...

  3. react link引入外部css样式的坑

    刚开始的代码是这样的,使用react router4.x写的demo路由跳转后,页面的没有渲染,是因为没有引入外部css文件(或者说引入外部文件路径错误) <!DOCTYPE html> ...

  4. vue引入外部.css文件,webpack将其与.vue中的样式混合打包了,怎么办?

    我使用vue-cli搭自己的博客,希望引入公共样式: // main.js import './assets/styles/common.css' 我本来是希望webpack打包后,能将这个样式独立打 ...

  5. vue引入外部css和js

    <template> <div id="app" > </div> </template> <script src=" ...

  6. 引入外部CSS的两种方式及区别

    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...

  7. IE11下不能引入外部css的解决方法

    原: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  8. CI框架引入外部css和js文件

    首先在项目根目录下建立assets文件夹,在这个文件夹下再建立css和js文件夹分别放置css和js文件 然后,在项目根目录下建立.htaccess文件 内容如下: RewriteEngine on  ...

  9. JQMobile引入外部CSS,JS文件

    使用CDN <!DOCTYPE html> <html> <head> <title>html5</title> <meta name ...

随机推荐

  1. Pyhton学习——Day51

    model(数据库模型)------ORM----- 表与表之间的关系(两张表) 一对多 多对多 一对一 ORM------object relation mapping python的类 class ...

  2. maven的pom.xml配置json依赖

    <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...

  3. 中国剩余定理(excrt) 模板

    excrt板子题 #include <cmath> #include <cstdio> #include <cstring> #include <algori ...

  4. 监控Apache计数器

  5. 洛谷——P1352 没有上司的舞会

    https://www.luogu.org/problem/show?pid=1352#sub 题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树, ...

  6. linux 命令 xxd

    xxd,能够查看linux下文件的二进制表示.man一下xxd.能够得到下面信息 NAME        xxd - make a hexdump or do the reverse. SYNOPSI ...

  7. leveldb学习:sstable(2)

    block写入:block_builder block.h和.cc里定义了block的entry存储格式和restart,提供了entry的查找接口以及迭代器.那么怎样往写block里写entry呢? ...

  8. 上传文件 nginx 413错误

    nginx : 413 Request Entity Too Large 上传文件过程发生413 Request Entity Too Large错误,翻译为请求实体过大,断定为nginx限制了请求体 ...

  9. 1067. Sort with Swap(0,*) (25)【贪心】——PAT (Advanced Level) Practise

    题目信息 1067. Sort with Swap(0,*) (25) 时间限制150 ms 内存限制65536 kB 代码长度限制16000 B Given any permutation of t ...

  10. 浅谈SaaS应用开发的难度

    近期做SaaS应用的非常多,这样的模式是未来的一种趋势,这样的模式的最大优点就是云计算的优点--节约资源.网上有非常多人觉得SaaS非常easy,就是一个多用户租赁模式.这样的认识也不能说不正确.由于 ...