Vue中引入样式文件的方法
时间:2019-03-31
本文章向大家介绍Vue中引入样式文件的方法,主要包括Vue中引入样式文件的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、在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中引入样式文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- XCode中如何使用事务
- 如何部署编译NDIS驱动的环境(内部资料)
- 深度学习的入门级装机配置推荐
- Self Host模式下的ASP. NET Web API是如何进行请求的监听与处理的?
- GridView绑定小技
- XCode读取Excel数据(适用于任何数据库)
- ObjectDataSource选择业务对象列表为空的探讨
- ASP.NET Web API自身对CORS的支持: CORS授权检验的实施
- 模版引擎XTemplate与代码生成器XCoder(源码)
- 深度学习让人脸识别准确率不断提升
- 在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用
- 小论线性变换
- 谈谈基于OAuth 2.0的第三方认证 [下篇]
- Razor Engine,实现代码生成器的又一件利器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- WordPress插件File-Manager任意文件上传复现
- CVE-2020-15778:OpenSSH命令注入漏洞复现
- TokyoWesterns CTF 6th 2020 部分WP
- 极客巅峰2020 部分WriteUp
- norecon:一款自动化recon工具
- Bashtop:一款功能强大的LinuxOSXFreeBSD资源监控工具
- iOS 推送手机消息背后的技术
- 手把手教你使用 cert-manager 签发免费证书
- flink源码分析之TaskManager启动篇
- 【面试说】一年半前端 Bigo 一二三 面
- 【前端进阶】深入浅出浏览器事件循环【内附练习题】
- 【面试说】一年半前端 Shopee 面经
- 【前端进阶】深入浅出 JavaScript 中的 this
- 手把手带你玩转 AWS Lambda
- Guava 中的 Stopwatch 是个什么鬼?