两种方式引入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文件的更多相关文章

  1. vue的cli中引入css文件

    在public文件中创建一个文件夹css,放进reset.css 在main.js中引入即可 import '../public/css/reset.css'就可以啦

  2. vue中引入字体文件

    在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2 ...

  3. (转)webpack和webpack-simple区别(如何引入css文件)

    博主最近研究vue+webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simp ...

  4. vue中如何引入css文件

    两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...

  5. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  6. vue中引入字体图标报错,找不到字体文件

    在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...

  7. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  8. 『vue踩坑日常』 在index.html中引入静态文件不生效

    Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...

  9. 【jsp】怎么在jsp文件中引入静态文件(.js .css)

    如果在jsp文件中引入静态文件比如(.js或.css等等),可以在使用 /项目名称/路径 的方式,但是这种方式如果在修改了项目了名称后就显得比较麻烦了.除了之外还许多方式,比如相对路径等等.一般情况下 ...

随机推荐

  1. light oj 1011 - Marriage Ceremonies

    题目大意: 给出n*n的矩阵Map,Map[i][j]代表第i个男人和第j个女人之间的满意度,求男女一一配对后,最大的满意度之和. 题目思路:状态压缩 题目可看做每行取一点,所有点不同列的情况下,各个 ...

  2. oracle启用归档日志

    一.开启归档 1.查看归档信息 SQL> archive log list Database log mode No Archive Mode Automatic archival Disabl ...

  3. Zookeeper学习笔记1

    参考:从Paxos到Zookeeper分布式一致性原理与实践 从ACID到CAP/BASE ACID 事务(Transaction),一般是指要做的或所做的事情.在计算机术语中是指访问并可能更新数据库 ...

  4. 记录linux 命令

    1.du:查询文件或文件夹的磁盘使用空间 如果当前目录下文件和文件夹很多,使用不带参数du的命令,可以循环列出所有文件和文件夹所使用的空间.这对查看究竟是那个地方过大是不利的,所以得指定深入目录的层数 ...

  5. CMake的一些正确姿势

    1, 2,

  6. python中// 和/有什么区别

    python中// 和/有什么区别 通常C/C++中,"/ " 算术运算符的计算结果是根据参与运算的两边的数据决定的,比如: 6 / 3 = 2 ; 6,3都是整数,那么结果也就是 ...

  7. python字典不区分大小写

    from multidict import CIMultiDict dic=CIMultiDict() dic["key"]="1234" print(dic[ ...

  8. Git学习笔记05-撤销修改

    使用 git checkout -- file可以撤销工作区的修改 一种是修改后还没有放到暂存区,撤销修改回到和版本库一模一样的状态 lesson.txt文件已经提交到版本库了,内容如图. ​ 修改一 ...

  9. mongdb中的_id

    MongoDB中数据的基本单元称为文档(Document).文档是MongoDB的核心概念,多个键极其关联的值有序的放置在一起便是文档. 在一个特定集合内部,需要唯一的标识文档.因此MongoDB中存 ...

  10. 题解-POI2007 OSI-Axes of Symmetry

    Problem bzoj1100 题意概要:给定一个简单多边形(不一定凸),求其对称轴数量 数据组数\(\leq 10\),多边形点数\(\leq 10^5\) Solution 这题算是跨界算法的经 ...