Question

我的公司有一个庞大的代码库，我们最近开始实现bootstrap（v3.3.4）。

我们有100多个客户使用https://www.company.com/{client}/home/index等网址在同一网站上运行。

我们使用网址的{client}部分来标识客户端，并应用他们的特定设置和样式，使网站的外观和运行方式不同，就好像它们是自己的网站一样。我们目前只允许约20个客户拥有自定义样式，但这可能会在不久的将来发生变化。

当我们最初实现bootstrap时，我们希望保持所有客户端共有的核心引导样式（bootstrap-common.css）与客户端特定的引导样式（bootstrap-client1.css，bootstrap-client2.css）分开

这对于缓存目的来说是一个好主意，因为bootstrap-common.css中较少的更改不会导致重新编译所有特定于客户端的较少文件。但是，这是有问题的，因为如果我们想为客户端做一些简单的操作，例如覆盖@brand-primary，我们不仅必须覆盖bootstrap-client1.less中的变量，而且因为它是与bootstrap-common.less分开编译的我们必须覆盖使用该变量的bootstrap-common.less的所有css。主要代码重复和维护噩梦。

我们已经切换到让每个客户端都有自己的编译引导程序css文件，其中包括所有引导程序，我们的常见覆盖和样式，以及特定于客户端的覆盖和样式。

这解决了重写引导变量的问题，并且使用包含的这些覆盖编译了核心引导程序。这意味着我们要在client less less文件中设置@brand-primary变量，而bootstrap将在任何地方使用该变量。

然而，它不适合缓存，因为核心/常见的boostrap样式不会分离到它自己的css文件中。如果您在客户端之间切换，或者您更改了公共或客户端中的任何内容，则必须下载新文件，而不是单独缓存单独的文件。此外，如果您对core / common less文件进行一次更改，则必须重新编译每个客户端较少的文件。

我刚开始使用bootstrap，而且在做了一些研究后，我找不到任何具有相同用例的人。有没有人知道处理这种情况的好/标准方法？

Answer 1

我认为您应该仔细查看bootstrap.less文件。该文件的内容将向您展示如何设置Bootstrap的模块化。

Bootstrap使您可以通过在bootstrap.less中注释掉它们而不使用某些组件/模块。所有组件和模块都需要variables.less（但可能不需要所有变量）。大多数组件和模块都使用@brand-primary等变量（间接），因此更改它们也需要重新编译大部分代码。

请注意@brand-primary也设置了许多其他变量：

./variables.less:@brand-primary:         darken(#428bca, 6.5%); // #337ab7
./variables.less:@link-color:            @brand-primary;
./variables.less:@component-active-bg:       @brand-primary;
./variables.less:@btn-primary-bg:                 @brand-primary;
./variables.less:@pagination-active-bg:                 @brand-primary;
./variables.less:@pagination-active-border:             @brand-primary;
./variables.less:@label-primary-bg:            @brand-primary;
./variables.less:@progress-bar-bg:             @brand-primary;
./variables.less:@panel-primary-border:        @brand-primary;
./variables.less:@panel-primary-heading-bg:    @brand-primary;

对于您的用例，应找出要使用的组件和模块，以及哪些组件和模块取决于客户可以更改的变量。

对于你的bootstrap-common.css可以使用如下所示的东西：

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";

//custom Code

虽然bootstrap-client1.less然后看起来如下：

// Core variables and mixins
@import "variables.less";
@import "client_variables.less";
@import "mixins.less";

// Core CSS
@import "tables.less";
@import "forms.less";
@import "buttons.less";

// Components
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";

在上面，client_variables.less文件包含客户端的覆盖。 bootstrap-common.css文件现在可以用于所有客户端并缓存。

我希望这会有所帮助，尽管我确实意识到它并不完美。

Bootstrap组件本身无法编译，将它们分成核心和样式。例如，按钮有一个基类和样式类，但基类和样式类都是从同一个文件编译的（less / buttons.less）。

您还应该阅读：https://github.com/less/less.js/issues/2442#issuecomment-73875782

使用Bootstrap和LESS的多租户

1 个答案: