两种方式引入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. AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...

  2. 一张图片资源要占用多大内存xhdpi xxhdpi

    一张图片资源要占用多大内存,可以用下面的计算公式计算 4 * withPixel*(targetDensity /sourcedensity) * heightPixel*(targetDensity ...

  3. linux 工具学习网站

    推荐一个很不错的linux工具学习网站; 对于一个开发人员来说,我觉得掌握这些工具对于基于linux的应用开发来说事半功倍. http://linuxtools-rst.readthedocs.io/ ...

  4. HTTP协议07-通用首部字段

    通用首部字段 通用首部字段是指,请求报文和响应报文双方都会使用的首部. 1)Cache-Control 通过指定首部字段Cache-Control的指令,就能操作缓存的工作机制. 指令的参数可以多选, ...

  5. boost::bind 介绍

    boost::bind 介绍   这篇文章介绍boost::bind()的用法, 文章的主要内容是参考boost的文档. 1. 目的 boost::bind 是std::bindlist 和 std: ...

  6. Linux下的进程结构

    Linux系统是一个多进程的系统,它的进程之间具有并行性.互不干扰等特点.也就是说,每个进程都是一个独立的运行单位,拥有各自的权利和责任.其中,各个进程都运行在独立的虚拟地址空间.因此,即使一个进程发 ...

  7. mariadb:分区自动创建与删除

    参考文章:https://blog.csdn.net/xlxxcc/article/details/52486426 1.以日自动创建与删除分区 调用示例:CALL proc_day_partitio ...

  8. 【原创】运维基础之Docker(5)docker部署airflow

    部署方式:docker+airflow+mysql+LocalExecutor 使用airflow的docker镜像 https://hub.docker.com/r/puckel/docker-ai ...

  9. 性能工具之JMeter+InfluxDB+Grafana打造压测可视化实时监控【转】

    概述 本文我们将介绍如何使用JMeter+InfluxDB+Grafana打造压测可视化实时监控. 引言 我们很多时候在使用JMeter做性能测试,我们很难及时察看压测过程中应用的性能状况,总是需要等 ...

  10. Golang 类型转换,断言和显式强制转换

    1 前言 类型转换,可以用断言(只能使用在interface{}类型转换成其它类型)和显式类型强制转换(常规是用于基本类型) 2 代码 //graphql-go func(params graphql ...