vue单文件 style important引入样式
使用@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>
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>
vue单文件 style important引入样式的更多相关文章
- vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法
vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
- VUE2 第六天学习--- vue单文件项目构建
阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#cont ...
- vue 单文件组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...
- vue单文件中引用路径的处理
原文地址:vue单文件中引用路径的处理如有错误,欢迎指正! vue单文件的开发过程中,在单文件模版中可能会涉及到文件路径的处理,比如 <img>, style 中的 background ...
- 如何手动解析vue单文件并预览?
开头 笔者之前的文章里介绍过一个代码在线编辑预览工具的实现(传送门:快速搭建一个代码在线编辑预览工具),实现了css.html.js的编辑,但是对于demo场景来说,vue单文件也是一个比较好的代码组 ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- ts-loader如何与vue单文件组件衔接
.ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...
随机推荐
- Servlet中使用 Last-Modified、Expires和Cache-Control
long now = System.currentTimeMillis(); long expires = System.currentTimeMillis() + (1000 * 60 * minu ...
- xampp 通过pear安装PHP_UML
1.在环境变量中添加D:\xampp\php // 如果前面已经有其他环境变量了,那么要用分号;跟前面的隔开 2.ctrl+R , cmd , pear install PHP_UML 3.如果提 ...
- 2018 ACM-ICPC 徐州网络赛
Problem A Problem B Problem C. 首先枚举那些他知道但是我不知道的数字.枚举这些的所有情况. 然后对每种情况再枚举我们都不知道的数字.求出每行每列的期望,求个最大值. 这样 ...
- Hystrix熔断器(六)
一.分布式面临的问题 复杂的分布式体系结构中的应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免地失败雪崩效应多个微服务之间调用的时候,假设服务A调用微服务B和微服务C, 微服务B和微服务C又 ...
- RPD Volume 172 Issue 1-3 December 2016 评论04 end
这一篇作为本期的结束是因为发现后面的一些基本上也是EPR有关的会议内容, Contribution of Harold M. Swartz to In VivoEPR and EPR Dosimetr ...
- CodeChef - UASEQ Chef and sequence
Read problems statements in Mandarin Chinese and Russian. You are given an array that consists of n ...
- ZOJ 3949 Edge to the Root(树形DP)
[题目链接] http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3949 [题目大意] 给出一棵根为1的树,每条边边长为1,请你 ...
- 你真的懂ThreadPoolExecutor线程池技术吗?看了源码你会有全新的认识
Java是一门多线程的语言,基本上生产环境的Java项目都离不开多线程.而线程则是其中最重要的系统资源之一,如果这个资源利用得不好,很容易导致程序低效率,甚至是出问题. 有以下场景,有个电话拨打系统, ...
- 解决ThinkPHP3.2.3框架,PDO驱动查询出来的字段名全是小写的bug
找到文件:ThinkPHP\Library\Think\Db\Driver.class.php 找到代码: // PDO连接参数 protected $options = array( PDO::AT ...
- Nginx用为缓存服务器
Nginx 缓存组成 共享内存 数据定位 存储键和缓存对象的元数据 磁盘空间: 存储数据 nginx做为反向代理时,能够将来自upstream的响应缓存至本地,并在后续的客户端请求同样内容时直接从 ...