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