Vue项目中将CSS预处理器sass转为less

引入less

因为项目中已经有 sass 的库，所以不需要再次引入 sass ，只引入 less 即可

在终端用 npm 安装 less 和 less-loader

npm i less less-loader

此时 sass 和 less 共存。

修改预处理器引用标记及 style 语法

将所有 vue 文件内的

<style lang="scss">

修改为

<style lang="less">

所有的 .scss 后缀文件重命名为 .less 文件；

此时会有样式语法报错，原因是 sass 和 less 语法略有不同。

修改语法

以下情况可以直接转换

1. sass 中的变量用 $ 声明，less中的变量用 @ 声明。
2. 两者引入文件均为 @import "example.css" 不用修改。

需要额外注意，若含有以下两种情况，谨慎转换

1. 因为 less 中没有控制语句语法，若 scss 代码中具有控制语句如 if-else / for 则谨慎转换。
2. 若项目中有引入依赖 scss 的第三方库，则转换后容易出现样式异常。