vue中scss从安装到最后完成一键换肤效果全过程

本来打算用less来实现这个功能，更为轻量简便，但是平时scss使用更多，首先是安装scss
一、安装对应依赖node模块：

	npm install node-sass --save-dev
	npm install sass-loader --save-dev

二、 在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({
									// Provide path to the file with resources
									// 要公用的scss的路径
									resources: './src/assets/css/global.scss'
							})
							.end()
			})
	}
}

三、在vue中进行使用 步骤二中的resources：'./src/assets/css/global.scss'路径中放着我的scss文件

$color: var(--testColor, #EDF0F4);

在我们要用到的vue组件中进行使用

<style lang='scss' scoped>
.cc-header {
  border: 2px solid #EDF0F4;
  background-color: $color;
}
</style>

在我们要进行换肤的点击函数中进行使用

document.getElementsByTagName('body')[0].style.setProperty('--testColor', '#EDF0F4')

颜色就变为#EDF0F4，换肤功能就做好

这是自己封装的一个通过svg画出的颜色选择器，通过滑动右边控制块，header背景颜色和rgb,hex值也会跟着改变，如果想要源码的点赞评论可以找我哦