如何为一个项目切换主题色

这里讲的不是本地自定义修改那种场景，而是根据后端返回的值来判断用哪种主题来展示。

1、换肤思路

本地存储n种静态css主题文件，根据登陆后后端的主题返回值来动态加载对应的主题文件

2、实现方式

1
2
3
4
5
6
7
8
9

let loadLink = (url) => {
    let link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName('head')[0].appendChild(link);
};

process.env.NODE_ENV !== "development" && loadLink(`/static/${theme}/index.css`);

上面代码就是典型的一个动态加载css的方法，而process.env.NODE_ENV !== "development"则是为了判断这是线上环境，在开发环境下我们用的不是这个编译后的css文件，为了方便我们会使用less

3、开发环境怎么使用less文件

1
2
3

if (process.env.NODE_ENV === "development") {
                require(`../plugins/dolphin/components/${themeValue}/src/index.less`);
            }

这样使得开发环境下，优雅地使用less编写主题。
然后webpack打包项目之前，使用 gulp 将less编译为css文件放到static文件夹下，在生产环境的时候，去加载static文件夹里面对应的主题，就实现了根据后端来展示对应主题的需求。

PS: require只能写在开发过程中，webapck会去编译，而执行时机在生产环境的代码不可以使用require，，因此要用loadLink这个方法

• ← Previous Post
• Next Post →