两种方式引入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. 作业要求20191010-3 alpha week 1/2 Scrum立会报告+燃尽图 01

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8746 一.小组情况组长:贺敬文组员:彭思雨 王志文 位军营 杨萍队名:胜 ...

  2. spark 笔记 12: Executor,task最后的归宿

    spark的Executor是执行task的容器.和java的executor概念类似. ===================start executor runs task============ ...

  3. P2118 比例简化

    P2118 比例简化 题解 这题考虑暴力枚举,枚举1~L的两个数 反正数据也很小 代码 #include<bits/stdc++.h> using namespace std; int a ...

  4. CompletableFuture用法介绍

    一.CompletableFuture用法入门介绍 入门介绍的一个例子: package com.cy.java8; import java.util.Random; import java.util ...

  5. jqGrid细节备注—jqGrid中自定义格式,URL格式

    本文来自:http://cnn237111.blog.51cto.com/2359144/782137 jqGrid中自定义格式,URL格式 当官方自带的showlink用起来不是十分顺手,因此可以考 ...

  6. MYSQL5.7二进制包的安装

    mysql5.7 二进制包安装1. 下载包 wget http://mirrors.sohu.com/mysql/MySQL-5.7/mysql-5.7.12-linux-glibc2.5-x86_6 ...

  7. delphi数组如何初始化

    https://wenda.so.com/q/1535561587217078delphi数组如何初始化rosegirl09112级分类:其他被浏览44次2018.07.01检举满意答案 csx330 ...

  8. Web测试方法_01

    一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#¥%……&*?[]{}”特别要注意单引号和&符号.禁止直接输入特殊字符时,使 ...

  9. crond服务总结

    昨天翻阅程序发现服务器端管理程序的启动方式很特别,在之前是由init进程启动程序脚本里的进程,昨天发现服务程序并没有在任何脚本中有启动的体现,但是服务程序确实是启动了,经过一番查找发现原来是crond ...

  10. LeetCode.1022-根到叶路径二进制数之和(Sum of Root To Leaf Binary Numbers)

    这是小川的第381次更新,第410篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第243题(顺位题号是1022).给定二叉树,每个节点值为0或1.每个根到叶路径表示以最高 ...