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>
参考链接
原文地址:https://segmentfault.com/a/1190000012728854
Vue style里面使用@import引入外部css, 作用域是全局的解决方案的更多相关文章
- Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer
问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...
- 久未更 ~ 五之 —— 引入外部CSS样式表 小节
> > > > > 久未更 系列一:在html中引入外部css样式表 //引入外部css样式表 //<lilnk>要放在<head>标签的第一行, ...
- react link引入外部css样式的坑
刚开始的代码是这样的,使用react router4.x写的demo路由跳转后,页面的没有渲染,是因为没有引入外部css文件(或者说引入外部文件路径错误) <!DOCTYPE html> ...
- vue引入外部.css文件,webpack将其与.vue中的样式混合打包了,怎么办?
我使用vue-cli搭自己的博客,希望引入公共样式: // main.js import './assets/styles/common.css' 我本来是希望webpack打包后,能将这个样式独立打 ...
- vue引入外部css和js
<template> <div id="app" > </div> </template> <script src=" ...
- 引入外部CSS的两种方式及区别
1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...
- IE11下不能引入外部css的解决方法
原: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- CI框架引入外部css和js文件
首先在项目根目录下建立assets文件夹,在这个文件夹下再建立css和js文件夹分别放置css和js文件 然后,在项目根目录下建立.htaccess文件 内容如下: RewriteEngine on ...
- JQMobile引入外部CSS,JS文件
使用CDN <!DOCTYPE html> <html> <head> <title>html5</title> <meta name ...
随机推荐
- Pyhton学习——Day51
model(数据库模型)------ORM----- 表与表之间的关系(两张表) 一对多 多对多 一对一 ORM------object relation mapping python的类 class ...
- maven的pom.xml配置json依赖
<dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...
- 中国剩余定理(excrt) 模板
excrt板子题 #include <cmath> #include <cstdio> #include <cstring> #include <algori ...
- 监控Apache计数器
- 洛谷——P1352 没有上司的舞会
https://www.luogu.org/problem/show?pid=1352#sub 题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树, ...
- linux 命令 xxd
xxd,能够查看linux下文件的二进制表示.man一下xxd.能够得到下面信息 NAME xxd - make a hexdump or do the reverse. SYNOPSI ...
- leveldb学习:sstable(2)
block写入:block_builder block.h和.cc里定义了block的entry存储格式和restart,提供了entry的查找接口以及迭代器.那么怎样往写block里写entry呢? ...
- 上传文件 nginx 413错误
nginx : 413 Request Entity Too Large 上传文件过程发生413 Request Entity Too Large错误,翻译为请求实体过大,断定为nginx限制了请求体 ...
- 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 ...
- 浅谈SaaS应用开发的难度
近期做SaaS应用的非常多,这样的模式是未来的一种趋势,这样的模式的最大优点就是云计算的优点--节约资源.网上有非常多人觉得SaaS非常easy,就是一个多用户租赁模式.这样的认识也不能说不正确.由于 ...