vue项目 在style标签中引入css,less,sass的方法
vue项目 style标签引入 less sass
less和sass需要安装相应的依赖
package.json 中加上 并再次npm install 重启项目
"less": "^3.12.2",
"less-loader": "^7.0.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
也可以根据对用的命令 后面带有版本的命令下载依赖
在我们编写vue代码时,有时候需要写入大量的css样式,会有一些不方便的情况
1.有时候定义变量可能会和class名称重复,根据字符查找变量时会查出多个,不便于查找
2.css会占用大量的行数 页面的dom和js代码并不是很多 整个页面却有几千行甚至上万
我们可以将css代码单独放在静态目录下存放,在style标签中引入
根据项目所用语言定义文件后缀, .css .less .scss 这里定义的是less后缀
在需要的目录下 style标签下进行引入
可以根据层级和@根目录进行引入
用@根目录的方法编译器会报错 页面上可以看css也确实生效了
注意 引入要根据文件后缀进行引入
比如 后缀为.less的样式文件style标签 的lang=""属性也要对应的修改
<style lang="less" scoped>
/**引入的首页的样式css | less*/
@import "../assets/css/Tax.less";@import "@/assets/css/Tax.less";
</style>
如果是scss后缀的文件要修改为(因为是另外的项目 所以路径会不一样)
<style lang="scss" scoped>/**引入的首页的样式css | scss*/@import '@/static/css/index.scss';/**引入的底部导航样式css | scss*/@import '@/static/css/bottomView.scss';
</style>
vue项目 在style标签中引入css,less,sass的方法相关推荐
- vue 在style标签中引入js变量控制样式
START 如果希望元素的样式根据js代码去控制,常见的办法呢,是在元素的style属性绑定变量即可 例如 <h3 :style="{ color: colorList[0] }&qu ...
- vue如何在style标签中使用data响应式数据?
文章目录 一.面临到的需求? 二.如何在css中使用变量? 三.vue如何在style标签中使用data响应式数据? 一.面临到的需求? 首先我们知道css对应是有伪类的,如:hover, :acti ...
- Vue中引入css文件
一.全局引入 import "@/文件路径"; //@代表的是你的项目根路径 例如: 二.在style标签中引入(可设置成局部) 在标签上添加 scoped 属性后则变成了局部引用 ...
- vue页面中引入css
1.当你的css样式中没有使用sass的时候,可以直接引用后缀名为.css的样式文件 <style> @import '../../satic/index.css'; </style ...
- 在style标签中,vue项目引入style文件,外部css文件
在style标签中,vue项目引入style文件,外部css文件 一.css是什么? 二.使用步骤 1.使用style标签引入 2.在style标签内使用@import导入 总结 一.css是什么? ...
- h5引用项目里css_HTML中引入CSS 的方式
有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入 外部 CSS 文件.下面我们就来看看这些方式和它们的优缺点. 内联方式 ...
- style标签中的几个属性
1.vue中使用css通常采用如下形式 <style lang="scss" scoped></style> 2.lang="scss" ...
- HTML中引入CSS文件的几种方法
概况来说有以下四种: 1.行内式:也称内联式,在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势: 2.嵌入式:将CSS样式集中写在网页的<head></head ...
- 在html中引入css、js和jQuery的方法
在html中引入css代码 在html中插入CSS样式表的方法有三种: 1.外部样式表(External style sheet):即所有的样式单独写在一个.css文件中,在html文件的head部分 ...
最新文章
- 最新(2019/3)CSDN博客Markdown编辑格式说明,包含效果图
- 曙光计算机系统,曙光1000大规模并行计算机系统
- message show_once这个标志位的用法
- RPC、RMI与MOM与组播 通信原理 .
- Hadoop入门-单机伪分布式配置
- 详解:设计模式之-策略设计模式
- ionic 压缩和上传视频文件
- 蓝桥杯 ALGO-84 算法训练 大小写转换
- 【动态规划】P1220:区间dp:关路灯
- 【源码】基于粒子群算法的MPPT跟踪
- 学前儿童健康教育 复习资料 渝粤题库整理
- 嵌入式学习为什么要选择4412开发板
- 【Windows】win7虚拟机安装VMware Tools
- 本月热门技术岗位招聘,全在这里了!
- 函数的信息传递(C语言实践)
- Centos清理内存 内存回收释放及内存使用查看的相关命令
- 201871010123-吴丽丽《面向对象程序设计(Java)》第一周学习总结
- 电路分析第二章 运算放大器
- 洋洋洒洒688字带你彻底吃透Zuul的插件机制及定制化开发
- python制作英语小词典_如何用python(django)创建英语词典应用程序?