使用 webpack 的多个引导主题

Posted 2023-03-06

【中文标题】使用 webpack 的多个引导主题

【英文标题】：Multiple bootstrap themes with webpack

【发布时间】：2017-07-19 04:30:18

【问题描述】：

我正在构建一个应用程序，其主题要求只能在运行时确定。在构建时，可以为所有主题提供主题变量。

是否可以让 webpack 使用不同的变量文件来构建节点模块 - 在这种情况下是引导程序？我想在构建时我希望它构建多个版本/主题的引导程序。然后在运行时我可以根据一些前缀引用正确的 css 文件。

例如

theme1.bootstrap.css 
theme2.bootstrap.css
theme3.bootstrap.css

我正在使用 bootstrap 4 和 webpack 2。

使用 webpack 是否可行，我该如何实现？

【参考方案1】：

当然。我假设您正在根据用户配置文件类型系统确定主题。看看下面并添加一个 if 语句来查找 sql 中的变量，然后简单地应用 css。简单的。尝试创建它，如果遇到麻烦，请在此处发布您的代码，我相信有人可以提供帮助。 Add stylesheet to Head using javascript in body 正文中的脚本。此外，如果您没有使用 bootstrap 允许主题文件，那么您可以保持整体样式加载并简单地应用您想要的配色方案，这样您只需要加载较大的脚本一次。

【参考方案2】：

你可以使用webpack插件themes-switch，把你所有的主题文件放在一个目录下，插件会将主题编译成单独的文件。然后使用函数changeTheme在运行时切换主题。

https://github.com/terence55/themes-switch