Vue中引入样式文件的方法


Posted in Javascript onAugust 18, 2017

一、在vue中使用scss

首先进行安装如下依赖: 

cnpm i sass-loader node-sass -D

二、vue中引入样式文件

1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>2imis</title>
  <link rel="stylesheet" href="./static/reset.css" rel="external nofollow" >  
 </head>
 <body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 </body>
</html>

2)在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入。这里会对scss文件进行解析,将对应的css代码插入生成html文件的style标签中,成为内联样式。

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUi from 'element-ui'
import '@/common/scss/theme-blue.scss'
Vue.config.productionTip = false
Vue.use(ElementUi);
/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

3)在对应的模板.vue文件中引入

发现一个问题,如果不在main.js中引入,直接在诸如app.vue文件中引入scss文件时候,虽然会将css代码插入生成的html标签中成为内联样式,但是不会讲scss文件进行解析,会引发问题。

难道scss文件必须首先在入口的index.js中引入,才能将scss解析,具体的vue中依赖某一个scss,还需要单独再引入一次。

总结

以上所述是小编给大家介绍的Vue中引入样式文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Lua表达式和控制结构学习笔记
Dec 15 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 #jQuery
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 #Javascript
select自定义小三角样式代码(实用总结)
Aug 18 #Javascript
js使用highlight.js高亮你的代码
Aug 18 #Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 #Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 #Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 #Javascript
You might like
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
document.open() 与 document.write()的区别
2007/08/13 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python易忽视知识点小结
2015/05/25 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
python用for循环求和的方法总结
2019/07/08 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Python requests上传文件实现步骤
2020/09/15 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
香港化妆品经销商:我的公主
2016/08/05 全球购物
法国家具及室内配件店:home24
2017/01/21 全球购物
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
两道JAVA笔试题
2016/09/14 面试题
JAVA高级程序员面试题
2013/09/06 面试题
房地产公司见习自我鉴定
2014/04/28 职场文书
大学新学期计划书
2014/04/28 职场文书
访谈节目策划方案
2014/05/15 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
Python中的tkinter库简单案例详解
2022/01/22 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
GPU服务器的多用户配置方法
2022/07/07 Servers
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技