SCSS历史介绍与配置

学习版本:哔哩哔哩版本-SCSS从入门到实战

参考地址:

 第一部分 SCSS历史介绍

一、css预处理器出现的原因

1、没办法写嵌套。

2、没有变量,比如颜色只能用字面量。

二、出名的CSS预处理器介绍

1、SCSS/SASS

07年SCSS诞生,SCSS是SASS的进化,人气最高

2、LESS

09年诞生,编程功能不够丰富

3、Stylus

10年诞生,人气不如前两者高,写后端的用的多

三、SCSS与SASS的关系

Sass有两套语法

1、第一套是SCSS,更新,扩展名是.scss

2、第二套是SASS,旧版本,扩展名是.sass,并不兼容css

四、使用预处理器的优劣

缺点:文件体积和复杂度不可控,增加了调试难度和成本

五、选择SCSS的原因

 好用

第二部分 环境配置(在vue中的安装与使用) 

一、安装方式介绍

1、不依赖编辑器

node-sass模块

2、依赖编辑器

二、安装步骤

1、不依赖编辑器

(1)Node环境

1-安装

安装指令: cnpm i -g node-sass

查看版本:node-sass -v

为了避免因为版本导致的各种不兼容的问题,采用这两个安装指令:

cnpm install sass-loader@7.3.1 --save-dev 

cnpm install node-sass@4.14.1

后来我还遇到了各种因为webpack导致的版本不兼容的问题,webpack版本对应的如下:

wepack: 3.6.0

webpack-dev-server: 2.9.1

webpack-cli: 由于webpack版本低于4,不需要webpack-cli

对应的vue版本为:2.5.2

VScode配置

安装Easy Sass(编译)和Sass(代码提示)这两个插件,注意区分大小写。

我是在vue项目中想要使用sass,遇到了以下问题。

第一个:安装sass后,要在webpack中对sass进行配置。

参考文档:https://blog.csdn.net/duansamve/article/details/89412838

第二个:兼容性的问题,报错Module build failed: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. 

后来安装了node-sass@4.14.1 就成功了,但回家后发现package.json中没有node-sass,但是如果是5.0.0版本的话,package.json中会有node-sass. 

参考文档:https://blog.csdn.net/weixin_42390302/article/details/109443294

第三个:当我尝试卸载高版本loader的时候,又遇到了权限问题,

报错:npm ERR! code EEXIST   npm ERR! syscall mkdir

原因:这种报错是因为在vscode中的终端执行命令,权限不够,要在cmd中执行才行。

参考文档:https://blog.csdn.net/qq_37086982/article/details/103488715

第四个:安装的问题,报错:This dependency was not found:

* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/

解决方法:先去package.json中,看看各种loader是不是都安装上了,主要是这几个:

"css-loader": "^0.28.11",
"sass-loader": "^7.3.1",
"style-loader": "^2.0.0",
"stylus-loader": "^5.0.0",
如果确定这些loader都有,就再执行一遍cnpm install

第五个:报错Module build failed: Error: Cannot find module 'node-sass'

我在package.json中没有找到node-sass,原因看第二个问题。这个地方注意,安装node-sass的时候,不要安装高版本,会有兼容性问题,就像是第二个错误一样。

参考文档:https://blog.csdn.net/qq_38401285/article/details/86483278

第六个:scss与sass混用的问题,在style中引用的时候要使用 lang="scss",不要写lang="sass" 。报错:Invalid CSS after ".xxx{": expected "}", was "{" 

参考文档:https://blog.csdn.net/zhangchao19890805/article/details/64122182

第七个:

报错: TypeError: this.getOptions is not a function

原因:版本过高问题导致的

查看版本指令: node-sass -v
node-sass 5.0.0 (Wrapper) [JavaScript]
libsass 3.5.5 (Sass Compiler) [C/C++]

总结了以下各种能配合的版本:

cnpm install sass-loader@7.3.1 --save-dev 

"style-loader": "^2.0.0"
cnpm install node-sass@4.14.1
参考文档: https://www.cnblogs.com/bin521/p/11634340.html
 

 == 就装个sass,我把能遇到的报错都遇到了,nice呀

原文地址:https://www.cnblogs.com/qingshanyici/p/14417579.html