sass与less的区别及卸载sass改为less

移除node-sass使用less

由于用npm 或者yarn 安装less较容易，而安装sass要么就一直报安装失败，要么费了九牛二虎之力才能安装成功。安装体验磕磕绊绊，故统一使用less。

第一步，移除sass相关依赖包

yarn remove sass
yarn remove sass-loader
rm -rf .\node_modules\
复制代码

第二步，安装less相关依赖包

yarn add less less-loader --dev
复制代码

第三步，检查报错源

注意less跟sass的区别，这里简单提几个

变量在Less和Sass中的唯一区别就是Less用@，Sass用$
复制代码

Sass中如果变量需要在字符串中嵌套，则需使用#加大括号包裹：
例：border-#{$left}:10px solid blue;
Less中是变量名使用大括号包裹，例：
.theme-@{theme-name} {...}
复制代码

Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
复制代码

第四步，sass文件替换成less

注意不是所有的标签上都需要加上lang="less",有嵌套、变量和计算、Mixin代码片段，循环等的加上即可，且不要一次性所有文件都换成less,要一个一个跑，不然不好定位错误。

写得不好，希望互相鼓励

补充踩坑： 在修改公司的项目时，发现less中有些类名没被编译解析成功，于是开始各种搜索查资料，最后发现是less定义变量时，如果要作为类名使用，类名变量的值是不要有引号的，less是这样的：

@theme-name: dark;
复制代码

.theme-@{theme-name} {
...
}
复制代码

sass是这样的：

$theme-name: 'dark';
复制代码

.theme-#{$theme-name} {
...
}

作者：何需清浅
链接：https://juejin.cn/post/7028762061505036318
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。