Vue支持sass

1. CSS预处理器

CSS预处理器定义了一种新的编程语言，为CSS增加了一些编程特性，让CSS更加简洁、强大、易维护，常见的CSS 预处理器语言有 scss（sass）、less 等。

2.SASS和SCSS的区别

除了文件后缀不同（分别是“.sass” 和 “.scss”）外，Sass是以严格缩进式语法规则来书写的，不带大括号和分号，而SCSS语法和CSS书语法相似。

3. 安装SASS

0.1> 安装

# 安装 webpack
npm install webpack --save-dev
# 安装 sass-loader
npm install sass-loader --save-dev
# 安装 Dart sass
npm install sass  --save-dev

注意：Vue 2的 sass-loader 版本如下

"devDependencies": {
    "webpack": "^4.46.0",
    "sass": "^1.52.3",
    "sass-loader": "^10.0.0",
},

0.2> vue脚手架已自带less、sass配置，因此无须配置webpack loader；

0.3> 在vue中使用

<style lang="scss" scoped>

</style>

注：推荐在创建Vue项目时，就添加Sass支持

4.0 原理详解

sass-loader 是 webpack 的一个loader，其作用是为了给 webpack 的构建过程提供 sass 转 css 的能力；但 sass-loader 实际并不能将 sass 编译为 css ，sass-loader 只是一个桥梁，真正的编译工作是由底层编译器 node-sass 或 dart-sass 实现，因此在安装 sass-loader 的同时必须安装 sass 编译器；

5.0 SASS编译器

常见的SASS编译器有 Dart Sass 和 Node Sass；Sass官方主推 dart-sass，最新特性都会在 dart-sass 上先实现；

node-sass 是用通过 node 调用 libsass来编译 sass，LibSass使用C/C++开发，虽然运行速度快，但迭代速度慢；

dart-sass 是用通过 drat 虚拟机来编译 sass，使用Dart语言开发，其代码更易编写和维护，并且Dart具备编译输出为JavaScript的能力，使得Dart Sass可以兼容NodeJS平台。