ess，scss和stylus都是css的预处理器，首先我们要明白我们为什么要使用less，scss和stylus，因为css只是一种标记语言，其中并没有函数变量之类的，所以当写一些复杂样式的时候存在局限性，不灵活，而less，scss和stylus正好弥补了css的这些局限，让css可以更灵活的编写样式，所以运用scss就不需要像写css时队友的语法需要做hack处理。scss 是 sass 3 引入新的语法，其语法完全兼容 css3，并且继承了 Sass 的强大功能。也就是说，任何标准的 css3 样式表都是具有相同语义的有效的 scss 文件。
1.less的使用
- 命令：
npm install less less-loader --save
- less在组件内使用
<style lang="less" scoped>
</style>
- 修改webpack.config.js文件。vue.cli 搭建项目可跳过此步
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
2.scss的使用
- 安装命令
npm install node-sass sass-loader style-loader --save
- scss在组件内的使用
<style lang="scss" scoped></style>
- 修改webpack.config.js文件
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
- 注:组件内，设置<style lang='scss'>。scss与sass只是 语法规范不一样，具体 使用可根据个人习惯。
3.stylus的使用
- 命令
npm i stylus stylus-loader -s
- stylus在组件内的使用
<style lang="stylus" scoped>
</style>作者：菲儿_cdd4
链接：https://www.jianshu.com/p/bd8ab8308097
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。