巩固——Vue中如何使用less和scss?
最近vue用的越来越勤了,在复习一下vue如何使用less和scss,直接进入主题吧:
安装使用less:
1、首先使用npm下载依赖;
npm i less less-loader -S
2、修改webpack.base.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加
// 此种方法在控制台中标签样式显示的是style标签样式
{ test: /\.less$/,loader: "style-loader!css-loader!less-loader",
},
// 可以在控制台中看到当前标签样式来自于哪个less文件
{ test: /\.less$/,loader: "style-loader!css-loader!less-loader",options: { sourceMap: true }
}
或者在main.js里
import less from 'less'
Vue.use(less)
3、 在vue文件中的style标签中添加lang=”less”即可在标签中使用less,或者外部引入less ,就可以开始愉快的使用less了
<style lang="less" scoped>
@import "../../static/common.less";
bg{background: red;
}
</style>
注意: less和less-loader的版本都会安装比较靠后的
因为less高版本的依赖有些错误,所以我们运行项目的时候可能会卡住或者报错:
解决:在根目录下package.json找到less和less-loader,我改成了下面的版本,然后npm install再npm run dev就正常了
"less": "^3.9.0",
"less-loader": "^5.0.0",
安装使用scss:
和less安装差不多
1、 首先使用npm下载依赖;
npm i node-sass sass-loader style-loader -D
2、 同样需要修改webpack.base.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加
{test: /\.scss$/,loader: 'sass-loader!style-loader!css-loader',
}
3、 在.vue文件的style标签中加 lang=”scss”
<style lang="scss" scoped>
@import "../../static/common.less";
bg{background: red;
}
</style>
注意:和上面less运行会有一样的问题,因为版本过高会导致项目运行出问题,所以都需要安装指定版本。安装重启后就可以正常运行了
npm uninstall sass-loader //卸载
npm install sass-loader@7.3.0 //安装指定版本
npm uninstall node-sass //卸载 node-sass
npm install node-sass@4.14.1 //然后安装最新版本(5.0之前)
这种方式和修改package.json区别就是,前者是先卸载之前的再安装指定版本、后者是直接指定版本然后下载覆盖之前的
拓展:
学过CSS的人都知道,它不是一种编程语言。
你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事;很自然地,有人就开始为CSS加入编程元素,这被叫做”CSS预处理器”(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件
什么是CSS 预处理器? SCSS是一种CSS预处理语言
定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁、适应性更强,可读性更佳,更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS
那么SCSS和SASS 有什么区别呢
- 文件扩展名不同,文件后缀分别是“.scss”和“.sass”
- sass是以严格缩进语法规则来编写代码的,不包括大括号和分号,而scss的语法和css书写语法类似;sass的安装和使用不细说了;
- scss是sass3.0引入的语法,可以理解scss是sass的一个升级版本,是一种SCSS-like语言,弥补了sass和css之间的鸿沟;
巩固——Vue中如何使用less和scss?相关推荐
- vue中使用scss
1.首先安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 ...
- vue中,scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
- vue中 静态文件引用注意事项
(一)assets文件夹与static文件夹的区别 区别一:assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中了 区别二:assets中的文件 ...
- 【vue】vue中ref用法
1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...
- VUE中使用sass
1.安装sass依赖包 (sass-loader依赖于node-sass) npm install --save-dev sass-loader npm install --save-dev node ...
- 设计模式在vue中的应用(五)
前言 目录整理: 设计模式在vue中的应用(一) 设计模式在vue中的应用(二) 设计模式在vue中的应用(三) 设计模式在vue中的应用(四) 设计模式在vue中的应用(五) 设计模式在vue中的应 ...
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
- img: SVG格式在vue中的使用
SVG格式在vue中的使用 SVG:svg是一种图像文件格式,它是可缩放的矢量图形,它是基于XML,由World Wide Web Consortium (W3C)联盟进行开发的.严格来说应该是一种开 ...
- 在 vue 中使用 SVG 建立图标系统并且使用
首先我们先来学一下 svg 标签的基础知识,参考了阮一峰大神的网络日志,链接:http://www.ruanyifeng.com/blog/2018/08/svg.html SVG 全称是可缩放矢量图 ...
最新文章
- 企业为什么要使用基于Docker的PaaS/CaaS平台
- c++ swap函数头文件_C++函数模板(泛型编程)
- 计算机组成原理 — 总线系统
- OpenDataSource和OPENROWSET
- em算法详细例子及推导_EM算法详解(例子+推导)
- 8266 at 驱动_AT、CVT、DCT 变速器,到底哪个更靠谱
- Eclipse3.2下JFace和SWT工程环境配置方法
- 设计模式笔记二十三:策略模式
- 那些“不顾一切”要搞开源的人,现在怎样了?
- Rasa对话机器人连载一 第121课:Rasa对话机器人Debugging项目实战之电商零售对话机器人运行流程调试全程演示-1
- ANSYS 有限元分析 命令流 实例
- 火箭是这样连胜的(转载)
- [算法课]算法课全题目解答及各周链接
- 5.5 Go语言项目实战:多人聊天室
- docx文档怎么排列图片_怎么把图片文字转换成word文档
- python selenium+firefox 使用已打开的火狐浏览器进行操作(不需要每次都重新打开火狐)
- 虚拟接口和SD-WAN
- 美柚如何精准引流?怎么通过美柚引流?美柚引流技巧
- 快速理解ResNeXt(结合代码)
- 计算机科学时间长被拒,计算机科学与探索外审一般多长时间 - 论文投稿 - 小木虫 - 学术 科研 互动社区...
热门文章
- JAMStack-SSR/SSG 框架
- 基于Spring Boot 的Blog开发(一)
- yeoman、bower、grunt 开发收集
- 称重传感器知识:型号,认证,性能与选择
- Java里什么是面向对象?
- Java中List集合的三种遍历方式(全网最详)
- 小程序wx.getUserInfo获取用户信息方案介绍
- 透彻详解(3)旁路电容100nF_0.1uF的由来计算
- 商业价值:谷歌眼中的搜索未来
- python 股票 因子分析_因子分析1.-Python数据科学技术详解与商业项目实战精讲 - Python学习网...