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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
javascript打开word文档的方法
Apr 16 Javascript
javascript的数组和常用函数详解
May 09 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 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也可以?成Shell Script
2006/10/09 PHP
mysql时区问题
2008/03/26 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
简单分析python的类变量、实例变量
2019/08/23 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
python opencv实现图像配准与比较
2021/02/09 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
党员岗位承诺书
2014/03/25 职场文书
房产委托公证书样本
2014/04/04 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
创业计划书之养殖业
2019/10/11 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书