解决项目中 sass 和 less并存需要统一的问题

2020-03-25  本文已影响0人  Axiba

目前场景是接到的项目中没有统一样式处理,例如不同模块,有的使用了 sass ,有的使用了less。

我们知道sass是成熟、稳定、强大的 CSS 预处理器,而 SCSS 是 Sass3 版本当中引入的新语法特性,完全兼容 CSS3 的同时继承了Sass强大的动态功能。

而Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

两者各有千秋,没有特殊洁癖个人觉得均可,但是因为项目中使用了 ant-desgin-vue, 而它本身是使用less的,于是决定项目中还是统一使用 less 吧。

1、首先移除 node-sass 和 sass-laoder

image.png

2、将所有的 lang="scss" 替换成 lang="less"


image.png

3 、变量控制定义: 将 $ 更改为 @


image.png

4、.scss 后缀文件改为 .less
例如 下面引入的 chart.scss 文件,应该改为 chart.less

<style lang="less" scoped>
  @import "chart";
</style>
上一篇 下一篇

猜你喜欢

热点阅读