vue-cli3中使用scss mixin换肤基本实现

在web开发中为了更好的体验有时会用到换肤的功能，可是网上的文章多多少少有点过期和混乱，通过本身的梳理和实践，写的更简单易懂。

用到的技术版本

• vue-cli3.0
• Sass/Scss

准备：项目npm安装如下依赖，devDependencies就行，这是我当时的版本

"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"style-resources-loader": "^1.3.2",
"vue-cli-plugin-style-resources-loader": "^0.1.4",

新建所需的scss文件以下图

文件位置本身定，这里主要有两个须要有两个主要的scss文件，一个是variable.scss定义全局变量，一个是mixin.scss定义混入方法。

1. variable.scss以下

$font-color-theme1 : red;//字体主题颜色1
$font-color-theme2 : #652BF5;//字体主题颜色2
$font-color-theme3 : deepskyblue;//字体主题颜色3

2. mixin.scss以下

@charset "utf-8";
// @import "./variable";

@mixin font_color($color) {
	/*经过该函数设置默认字体颜色，一旦设置主题后失效*/
	color: $color;

	[data-theme="theme1"] & {
		color: $font-color-theme1;
	}

	[data-theme="theme2"] & {
		color: $font-color-theme2;
	}

	[data-theme="theme3"] & {
		color: $font-color-theme3;
	}
}

3. 在vue组件中使用以下

<script>
	...//省略了一些无关的代码
	handleChangeTheme() {//绑定修改主题的方法
            if (this.mode == 0) {
				//根据须要改为mixin.scss中对应定义的值，好比[data-theme="theme1"]
                window.document.documentElement.setAttribute("data-theme", "theme1");
            }else{
                window.document.documentElement.setAttribute("data-theme", "theme2");
            }
        }
</script>
<style lang="scss" scoped>
	.title {
            font-size: 25px;
            text-align: center;
            font-weight: bold;
            // color: $font-color-theme1; //这种就是直接使用全局变量，就没法动态的变换了
			//@include font_color(red)//动态定义字体颜色，也能够是其余，也能够是scss中定义的全局变量
            @include font_color($font-color-theme3)
        }
</style>

4. 配置vue.config.js 增长编译配置以下

module.exports = {
	...//其余的配置
	 pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'scss',
            patterns: [path.resolve(__dirname, 'src/styles/mixin.scss'), path.resolve(__dirname, 'src/styles/variable.scss'),] //这里配置你建立scss文件
        }
    },
}

至此已经所有能够了。 其余的注意的点，若是mixin.scss中已经@import "./variable";了，那么你在vue.config.js中不引入 path.resolve(__dirname, 'src/styles/variable.scss')也没有关系；若是你都不配，那么须要你再vue组件中手动@import须要的（但这个不建议）