vue-cli3+ 搭建pc端管理项目（三, css预处理器scss使用）

项目中使用 css 预处理器，可以提高 css 开发效率，合理应用预处理器的特性，也可以提高 css 代码的可维护性。

目前常见的  css 预处理器有三种：less，scss(sass升级版)，stylus。不管是哪一种，最基本的variables，extend，mixin，import 这些都是有的，只不过具体的用法和写法各有不同罢了。大家可以根据自己的喜好，选择自己喜欢的预处理器。

我选择的是 scss。具体原因是：element-ui 的theme-chalk 使用 scss 编写，项目中如果也使用 scss，那么后续想改变 element-ui 的主题色，会非常容易。当然不使用 scss，也是可以改变 element-ui 的主题色或是使用自定义主题的，只不过个人觉得比较麻烦。所以，在这里直接选择了 scss。

scss 基本功能

1. 嵌套

// scss 写法
.container{
  width: 100%;
  height: 100%;
  .wrap{
    max-width: 1200px
  }
}

// 以上代码使用css书写
.container{
  width: 100%;
  height: 100%;
}
.container .wrap{
  max-width: 1200px;
}

// scss 写法
.container{
  width: 100%;
  height: 100%;
  background: #409eff;
  &:hover{
    background: #42b983;
  }
}
// 以上代码使用css书写
.container{
  width: 100%;
  height: 100%;
  background: #409eff;
}
.container:hover{
  background: #42b983;
}
// scss 写法
.title {
  font: {
    family: fantasy;
    size: 20px;
    weight: bold;
  }
}
// 以上代码使用css书写
.title{
  font-family: fantasy;
  font-size: 20px;
  font-weight: bold;
}

2. 变量 $

$color = #2E98FE

.container{
    width: 100%;
    height: 100%;
    background: $color
}

3. @mixin 和 @include

@mixin title-text {
  font: {
    size: 20px;
    weight: bold;
  }
  color: #2c3e50;
}
.card__title{
  width: 100%;
  height: 40px;
  @include title-text
}

4. @extend

// scss @extend
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

// 以上代码最终编译为
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; 
}
.seriousError {
  border-width: 3px; 
}

5. @import

@import "foo.scss";

scss 在项目中的使用

如果在利用脚手架创建项目的时候，没有安装 scss，可执行以下安装命令：

npm install node-sass --save-dev

npm install sass-loader --save-dev

1. 在 assets 文件夹中创建 scss 文件夹，用于存放 scss 的所有文件

具体文件如下：

common.scss        公共基础样式

main.scss        入口文件

mixins.scss        混入样式

reset.scss        重置文件

variables.scss        变量

一般情况下，每个系统都有属于自己的一套样式风格。我们可以根据设计规范，定义一套变量，然后在实际的开发中，使用变量编写 css 样式。这样写的好处是什么呢？就是当你的项目已经开发到一半或者已经开发完成进入测试阶段了，这时老板走过来对你说，这个系统怎么是蓝色的呀，改成红色吧。这个时候，再也不需要一个一个文件的修改样式了，只需要修改 variables 中的一个变量就可以了。

2. 全局引入 variables.scss 和 mixins.scss 文件

variables.scss 文件定义好之后，有两种使用方式：局部引入和全局引入。

mixins.scss 文件类似。

局部引入：在具体的文件中引入。

// App.vue

<style lang="scss" scoped>
@import './assets/scss/variables.scss';
.container{
  width: 100%;
  height: 100%;
  background: $background-color;
}
</style>

局部引入，变量只能在被引入的文件中使用。通常，变量在绝大多数文件中都会被用到，如果在每个文件中都要引入一遍，略显麻烦，这个时候就可以考虑全局引入。

全局引入：一次引入，随处可用。

// vue.config.js

module.exports = {
  publicPath: './',
  outputDir: process.env.VUE_APP_OUTPUT,
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/assets/scss/variables.scss";
          @import "@/assets/scss/mixins.scss";
        `
      }
    }
  }
}

这里需要注意的是： sass-loader 版本不同，loaderOptions 中 prependData 的属性名不同。

• sass-loader v8-，这个属性名是 "data"
• sass-loader v8 中，这个属性名是 "prependData"
• sass-loader v10+，这个属性名是 "additionalData"

3. 入口文件中引入其他文件

// main.scss

@import "./reset.scss";
@import "./common.scss";

这里注意文件的引入顺序。

// main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

import './assets/scss/main.scss'

Vue.config.productionTip = false

以上，就是我在项目用使用 scss 的方案。 

项目地址：

github地址

gitee地址

系列文章：

vue-cli3+ 搭建pc端管理项目（一, 项目创建）

vue-cli3+ 搭建pc端管理项目（二, 不同环境配置[开发，测试，生产]）

vue-cli3+ 搭建pc端管理项目（四, 按需引入 element-ui，支持修改主题色）

vue-cli3+ 搭建pc端管理项目（五, axios 使用及封装）