Vue 安装 CSS 预处理器（Less、Sass、Stylus）

一、简介

• Sass 和 Less 语法严谨，Stylus 相对自由。因为 Less 长得更像 css，所以它可能学习起来更容易。
  
• Sass 和 Stylus 都具有类语言的逻辑方式处理：条件、循环等，而 Less 需要通过 When 等关键词模拟这些功能，这方面 Less 比不上 Sass 和 Stylus。
  
• Less 在丰富性以及特色上都不及 Sass 和 Stylus，若不是因为 Bootstrap 引入了 Less，可能它不会像现在这样被广泛应用。
  
• Less 环境较 Sass 简单。
  
• 相对而言，国内前端团队使用 Less 会略多于 Sass。
  
• 从功能出发，Sass 较 Less 略强大一些。
  
• Sass 在市面上有一些成熟的框架，比如说 Compass，而且有很多框架也在使用 Sass，比如说 Foundation。
  

问题解决：适用下面所有解析器

• Vue 安装 less-loader 报错 unable to resolve dependency tree，其他 CSS 解析器 loader 解决方案一致
  
• 配置全局样式（style-resources-loader）
  

一、Less 安装与使用

• 安装流程

二、Stylus 安装与使用

• 安装

// 一起安装
$ npm i stylus stylus-loader -D
// 分开安装
$ npm i stylus -D
$ npm i stylus-loader -D
// 指定版本安装
$ npm i stylus@0.54.7 -D
$ npm i stylus-loader@3.0.2 -D

三、Sass 安装与使用

• dart-sass 与 node-sass 的区别与选择
  
• 安装

// 一起安装
$ npm i sass sass-loader -D
// 分开安装
$ npm i sass -D
$ npm i sass-loader -D
// 指定版本安装
$ npm i sass@1.26.5 -D
$ npm i sass-loader@8.0.2 -D