sass变量与引用分离(vue-cli3.x+)

概述

将sass中的变量、混合、与引用三者分离，
且将变量、混合的引入全局化
以便后续维护更加方便、快速

具体操作流程 方法一：
1.安装 三方模块

npm install sass-resources-loader -D

2.配置文件
在 vue-cli3.x+ 环境下，在package.json同级目录，创建 vue.config.js 文件
将需要全局化的sass文件，添加到列表，值得注意的是

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `
                    @import "@/css/variable.scss";
                    @import "@/css/mixin.scss";
                `
            }
        }
    }
}

新版本sass-loader,使用prependData代替data
prependData:@import "~assets/scss/variables.scss";{process.env.VUE_APP_SRC}";`

3.在单文件组件或别的sass文件中，就可以使用variable.scss、mixin.scss中的变量与混合了

具体操作流程 方法二：
1.安装 同上

2.配置文件vue.config.js 中

module.exports = {
  chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
            item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
                resources: ["./src/css/variable.scss", "./src/css/mixin.scss"]
            })
            .end()
        })
    }
}

检验成果：

mixin.scss

@charset 'utf-8';
@mixin wh($w,$h) {
  width: $w;
  height: $h;
  border: 1px solid red;
}

variable.scss

@charset 'utf-8';
$bg:skyblue;
$w:100px;
$h:100px;
$tsize:50px;
$w2:200px;
$h2:200px;

在单文件组件中使用，简单测试一下

<template>
  <div class="hello">
    <div class="test">
      test
    </div>
    <div class="box2">
      ssss
    </div>
  </div>
</template>

<style>
.test{
    //访问公共的scss变量  
    font-size:$tsize;
    background: $bg;
}
.box2{
    //访问公共的scss混入  
    @include wh($w2,$h2) 
}
</style>