概述
前端经常需要实现多种主题，通常的做法是使用CSS变量，但是这种方式不太友好，手动在CSS中定义所有变量很麻烦。vue-theme-loader可以解决这个问题，使用它可以让你更加方便地创建和切换主题。
安装
安装vue-theme-loader前需要先安装vue-loader和webpack：
npm install vue-loader webpack --save-dev
然后再安装vue-theme-loader：
npm install vue-theme-loader --save-dev
如果你使用的是yarn，可以使用下面的命令：
yarn add vue-loader webpack --dev yarn add vue-theme-loader --dev
使用方法
新建主题文件
首先，需要在项目的src目录下新建一个themes目录，然后在themes目录下为每个主题创建一个目录，并在该目录下新建一个index.scss文件。例如，我们创建了一个dark-theme，可以像下面这样创建目录和文件：
src
└── themes
└── dark-theme
└── index.scss编写主题样式
在index.scss文件中，可以定义该主题的样式。例如，我们可以定义一个变量来表示主题的主色调：
$primary-color: #333;
body {
background-color: #444;
color: $primary-color;
}使用vue-theme-loader
在webpack中使用vue-theme-loader，需要在vue-loader之前使用该loader。在webpack配置文件中添加如下配置即可：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
-
------- -------------
-------- -
-------- -
----- ------------------------------------------
----- ---------------------------------------------------------
--
--
--
-
------- -------------------
-------- -
------- ----------- --------
---------- -
---------- -
---------------- ---------
--
------- -
---------------- ------
--
--
--
--
--
--
-- ---
--
--
-- ---
--配置说明：
themes: 定义了当前项目存在几个主题，这个数组中需要包含每个主题文件夹的名字，例如上面我们定义的就是["default", "dark"]variables: 定义了每个主题的变量。每个主题对应一个对象，对象中包含了该主题下的各个变量。本例中，default主题中的primary-color变量值为#42b983，而dark主题中的primary-color变量值为#333。
这样配置完成之后，就可以在Vue组件中使用主题变量，例如：
<template>
<div>
<h1 :style="{ color: $theme['primary-color'] }">Hello Vue!</h1>
</div>
</template>这里我们使用了$theme变量来获取当前主题下的变量。这个变量是vue-theme-loader自动注入的。
切换主题
vue-theme-loader提供了一个v-theme指令来切换主题。在Vue组件中添加一个v-theme指令即可：
<template>
<div v-theme="$store.state.theme">
<h1 :style="{ color: $theme['primary-color'] }">Hello Vue!</h1>
</div>
</template>这里我们使用了Vuex来管理全局状态，$store.state.theme就表示当前主题的名字。当$store.state.theme的值发生变化时，v-theme指令会自动重新加载主题。
示例代码
为了更好地理解vue-theme-loader的使用方法，这里提供一个完整的示例代码。
src/main.js：
-- -------------------- ---- ------- ------ --- ---- ------ ------ --- ---- ------------ ------ ----- ---- ---------- ------------------------ - ------ --- ----- ------ ------- - -- ------- ------------------
src/App.vue：
-- -------------------- ---- -------
----------
---- -----------------------------
--- --------- ------ ----------------------- -------- ---------
-----
------- ------------------------------------------------
------- ------------------------------------------
------
------
-----------
--------
------ ------- -
-------- -
------------------ -
------------------------------ -------
--
--
--
---------src/themes/default/index.scss：
$primary-color: #42b983;
body {
background-color: #fff;
color: $primary-color;
}src/themes/dark/index.scss：
$primary-color: #333;
body {
background-color: #444;
color: $primary-color;
}配置代码参考前面的配置说明，这里不再重复展示。
总结
使用vue-theme-loader可以很方便地创建和切换主题。不过，如果每个主题下的样式变化较大时，还是要手动修改样式。但是这种情况下，我们仍然可以使用vue-theme-loader来定义主题变量，然后在组件中手动控制变量的值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c5e81e8991b448ebe01