前言
上一期分享了如何在vue-cli3的框架中，封装mixins，module 。本期将分享如何在vue项目中添加sass。
GitHub项目地址：https://github.com/jiangjiaheng/web-template
关于sass
本文默认你对sass有一定的了解，并且阅读过相关的官方文档，因此本文就不在赘述关于sass的基础知识。
sass官方文档：https://www.sass.hk/
添加方式
1. 创建项目时选择预处理器sass
$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features
移动上下键选择Manually select features：手动选择创建项目的特性。
显示如下：
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
移动上下键在CSS Pre-processors，按提示点击空格键选择CSS-processors。
显示如下：
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
LESS
Stylus
选择第一个SCSS/SASS作为我们的CSS预处理器。
完成后项目会帮我们安装sass-loader node-sass。
2. 手动安装sass-loader
如果在创建项目没有选择CSS预处理器，我们也可以手动安装sass-loader node-sass来集成scss。
npm install -D sass-loader node-sass
使用
完成添加后，我们只需要在style指定lang为scss即可，无须多余操作：
<style lang="scss" scoped>
$color: red;
h1 {
color: $color;
}
</style>
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
