移除node-sass使用less

·  阅读 353

由于用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} {
...
}
复制代码
分类:
前端
标签:
分类:
前端
标签: