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>