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