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須要的（但這個不建議）