脚手架搭建的vue2项目中使用sass

1.基础配置
安装环境：

npm i node-sass sass-loader style-loader -D

安装成功就可以在项目中使用sass

<style lang="scss">
//css样式
</style>

全局注册scss:

npm i sass-resources-loader -D

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/assets/reset.scss', //全局scss文件地址
                        './src/assets/mixin.scss'
                    ]
                })
                .end()
        })
    }
}

然后重新运行，就可使用
2.换肤小案例：

//reset.scss
$blueList: #7760ec #647bfd #7f8fea;

$redList: #fb0067 #ec146d #ea7fab;

$greenList: #0ad84c #39dc6d #7feaa1;

//mixin.scss
@mixin btn_color($index) {
    [data-theme="blue"] & {
        background-color: nth($blueList , $index);
    }
    [data-theme="red"] & {
        background-color: nth($redList , $index);
    }
    [data-theme="green"] & {
        background-color: nth($greenList , $index);
    }
}

// skinChange.vue
<template>
    <div>
        <div class="icon" @click="showSkin()"><i class="iconfont" :style="{color:skins[skinIndex].color}">&#xeeb1;</i></div>
        <div class="skins" v-if="isshowskin">
            <div class="skin"
                v-for="(sitem,sindex) in skins"
                :key="'skin'+sindex" 
                :style="{backgroundColor:sitem.color}"
                @click="changeIndex(sindex)"
                :class="{sative:skinIndex===sindex}"
                >
                <div class="mask"></div>
            </div>
        </div>
        <div class="btns">
            <div class="btn"
                v-for="(bitem, bindex) in btns"
                :key="'btn'+bindex"
                :class="'btn-'+(bindex+1)">{{bitem}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name:'skin-change',
    data() {
        return {
            isshowskin: false,
            skins:[
                {
                    color:'#7f8fea',
                    name:'blue'
                },{
                    color:'#ea7fab',
                    name:'red'
                },{
                    color:'#7feaa1',
                    name:'green'
                }
            ],
            skinIndex: 0,
            btns:['看看', '其他', '零零']
        }
    },
    computed:{
    },
    methods:{
        showSkin(){
            this.isshowskin = true
        },
        changeIndex(index) {
            this.skinIndex = index
            window.document.documentElement.setAttribute('data-theme', this.skins[index].name)
        }
    },
    mounted() {
        window.document.documentElement.setAttribute('data-theme', this.skins[this.skinIndex].name)
    }
}
</script>

<style lang="scss">
    .icon{
        i{
            color: #7f8fea;
            font-size: 30px;
        }
    }
    .skins{
        width: 160px;
        height: 60px;
        display: grid;
        padding: 10px;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 40px;
        gap: 10px;
        box-shadow: 0 0 12px #dedede;
        .skin{
            position: relative;
            .mask{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(255,255,255,.6);
                opacity: 0;
            }
            &.sative{
                .mask{
                    opacity: 1;
                }
            }
        }
    }
    .btns{
        margin-top: 50px;
        display: flex;
        .btn{
            padding: 10px 24px;
            border-radius: 6px;
            margin-left: 10px;
            color: #fff;
        }
        @for $i from 1 through 3 {
            .btn-#{$i} { 
                @include btn_color($i);
            }
        }
    }
</style>

最后看一下展示效果吧

skins.jpg