两种方式引入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中全局引入stylus文件的公共变量

    新建 一个公共的stylus公共文件添加公共变量,如下: 修改下图圈出的文件: 具体的修改如下: // generate loader string to be used with extract t ...

  2. vue中引入css文件

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

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

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

  4. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

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

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

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

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

  7. vue中如何引入全局样式或方法

    vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

  8. html引入css文件

    在HTML中,引入CSS的方法主要有行内式.内嵌式.导入式和链接式. 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.例: <html&g ...

  9. jquery,js引入css文件,js引入头尾

    jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...

随机推荐

  1. 关于synchronized和ReentrantLock之多线程同步详解

    一.线程同步问题的产生及解决方案 问题的产生: Java允许多线程并发控制,当多个线程同时操作一个可共享的资源变量时(如数据的增删改查),将会导致数据不准确,相互之间产生冲突. 如下例:假设有一个卖票 ...

  2. C++入门经典-例5.13-内存安全,被销毁的内存

    1:当指针所指向的内存被销毁时,该区域不可复用.若有指针指向该区域,则需要将该指针置为空值(NULL)或者指向未被销毁的内存. 内存销毁实质上是系统判定该内存不是变成人员正常使用的空间,系统也回将它们 ...

  3. RocketMQ存储系统概要设计和源码解读

    普遍消息存储技术的选型 分布式KV存储 NewSQL存储:TiDB 文件系统:RocketMQ,kafka,RabbitMQ RocketMQ:所有的message存储在一个log里,不区分topic ...

  4. 移动端 iphone手机在中文情况下不执行keyup事件

    问题:移动端 在

  5. 在win7下,将QT集成到vs2010上

    在网上查了很多,自己先是下载了一个5.2.0版本的,但在我的电脑上运行时老报错,一怒之下决定不再使用5.2.0版本的QT,而先择了更低版本的4.8.5版本,然后.....然后就成功了.谢天谢地,在这我 ...

  6. Moodle LMS 开源教育系统

    http://docs.websoft9.com/xdocs/moodle-image-guide/   帮助文档 示例图:没有细研究

  7. spark 笔记 13: 再看DAGScheduler,stage状态更新流程

    当某个task完成后,某个shuffle Stage X可能已完成,那么就可能会一些仅依赖Stage X的Stage现在可以执行了,所以要有响应task完成的状态更新流程. ============= ...

  8. yconsole使用说明

    介绍: yconsole是yhd用于管理缓存的工具(python实现),它的主要功能是为各个应用分配和管理缓存,以及错误修复.和它配合使用的还有ycache-client.yagent.zookeep ...

  9. Dubbo Monitor Simple 监控中心

    下载项目源码(其中的 dubbo-registry-simple 代表简单的注册中心,用于开发测试,生产环境一般用zookeeper) https://github.com/apache/incuba ...

  10. 转载 Golang []byte与string转换的一个误区

    Golang []byte与string转换的一个误区 https://www.oyohyee.com/post/Note/golang_byte_to_string/ 2019-08-10 23:4 ...