vue中引入css文件
两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法:
import 'element-ui/lib/theme-default/index.css'
这种写法适用于此css文件存在于项目中,不适用于通过网址访问的方式引入,会报错。偶试着引入Font Awesome,结果报错:
|
1
|
import "http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" |
而直接在组件中引入却可以,组件中引入也比较简单:
<style>
@import "../css/style.css";
@import "//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
</style>
引入语句后面最好加上分号,只引用一个还好,引用多个不加分号会报错。
当然还有使用require()引入的,暂时比较习惯使用import。
vue中引入css文件的更多相关文章
- vue的cli中引入css文件
在public文件中创建一个文件夹css,放进reset.css 在main.js中引入即可 import '../public/css/reset.css'就可以啦
- vue中引入字体文件
在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2 ...
- (转)webpack和webpack-simple区别(如何引入css文件)
博主最近研究vue+webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simp ...
- vue中如何引入css文件
两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...
- vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- vue中引入字体图标报错,找不到字体文件
在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- 『vue踩坑日常』 在index.html中引入静态文件不生效
Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...
- 【jsp】怎么在jsp文件中引入静态文件(.js .css)
如果在jsp文件中引入静态文件比如(.js或.css等等),可以在使用 /项目名称/路径 的方式,但是这种方式如果在修改了项目了名称后就显得比较麻烦了.除了之外还许多方式,比如相对路径等等.一般情况下 ...
随机推荐
- 【MongoDB】 Failed to connect to 127.0.0.1:27017, reason: Connection refused
由于项目需要,在一台虚拟机上安装了MongoDB,但是在启动的时候,出现如下错误: [root@localhost bin]# ./mongo MongoDB shell version v3.4.0 ...
- C++设计模式之工厂模式(1)
关于设计模式的作用: “帮助我们将应用组织成容易了解,容易维护,具有弹性的架构,建立可维护的OO系统,要诀在于随时想到系统以后可能需要的变化以及应付变化的原则.” 具体可参考:https://www. ...
- BIM 3D 数据交换格式 ----张建平(清华女)
1.collada EXPORTER 2.FBX 3D MAX 3.DAE 4.3D中的OBJ文件格式详解 ( http://www.cnblogs.com/slysky/p/408130 ...
- 带你玩转Visual Studio——带你了解VC++各种类型的工程
原文地址:http://blog.csdn.net/luoweifu/article/details/48816605 上一篇文章带你玩转Visual Studio——带你新建一个工程一文中提到新建一 ...
- git与eclipse集成之创建及切换个人本地分支
创建个人本地特性分支,并进行编码 弹出选择分支的窗口,选择要切换的个人特性分支(备注:根据远程个人特性分支创建本地个人特性分支) 点击OK,Branch name:分支名称与远程分支名称相同,不需要修 ...
- 博客主Judge已跳槽搬家emmm
跳槽网站:博客园 顺便带一下:洛谷blog (好久没更了QAQ...) ### 不过csdn上还是会照常更新的,毕竟用着方便
- planning深度剖析
planning深度剖析 结合find命令过滤目录及文件名后缀: find /home/hadoop/nisj/automationDemand/ -type f -name '*.py'|xargs ...
- 网站被k
经常见到很多SEO人员的网站被搜索引擎K了,到处找所谓的SEO大神求助,最后还是无用功,作为优秀的SEO人员我们不能病急乱投医.接下来,我会着重讲解网站被K之后如何快速恢复的办法. 首先来说下网站被搜 ...
- ansible笔记(11):初识ansible playbook(二)
ansible笔记():初识ansible playbook(二) 有前文作为基础,如下示例是非常容易理解的: --- - hosts: test211 remote_user: root tasks ...
- Python学习 --- 列表
list 函数可以将 序列变为列表 列表操作: 1 . 元素赋值, 根据索引,可以直接修改 2 . 删除元素, del x[i] 3 . 分片赋值, name[1:] = list (' '), 可以 ...