巩固——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之间的鸿沟;

1 thought on “巩固——Vue中如何使用less和scss?

发表评论

电子邮件地址不会被公开。 必填项已用*标注