vue-cli@3添加sass（vue项目模板封装系列）

前言

上一期分享了如何在vue-cli3的框架中，封装mixins，module 。本期将分享如何在vue项目中添加sass。

GitHub项目地址：github.com/jiangjiahen…

关于sass

本文默认你对sass有必定的了解，而且阅读过相关的官方文档，所以本文就不在赘述关于sass的基础知识。

sass官方文档： 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>
复制代码