Question

我们在项目中使用bootstrap。我们为bootstrap购买了一个自定义主题，围绕它创建了一个漂亮的自定义样式，并添加了我们在项目中使用的许多有用的样式。这个主题使用了LESS。

现在我们的每个客户都想为他们的网站设计一个自定义配色方案。通过简单地改变一些LESS变量，我们可以生成完全不同的外观。

例如：

@import "../../theme/style.less";
@import "../../shared.less";

// Basic Colors
@navy: #781d7e;       // Primary color
@dark-gray: #c2c2c2;  // Default color
@blue: #8dc63f;       // Success color
@lazur: #00aedb;      // Info color
@yellow: #f7941e;     // Warrning color
@red: #ed1c24;        // Danger color

这会生成一个包含所有样式的完整css文件。每个客户端都有自己的一组生成.css文件。我们的问题是每次进行更改时都需要花费很长时间来编译它们。

我们如何使用LESS具有基本主题并仅生成修改使用修改变量的值所需的类覆盖？

例如，如果btn-primary background-color是@navy，那么对于新的配色方案，我需要的是一个css文件，其中包含.btn-primary的类覆盖，将background-color更改为@navy的新值。这对LESS来说是否可能？

谢谢，

Answer 1

请参阅我对类似问题的回答，这有助于解决您的问题。 https://stackoverflow.com/a/25055203/138029

如果您使用的是MVC 4或更高版本，则可以使用BundleTransformer编译LESS服务器端。

它可能取决于您希望如何提供文件。如果您在运行时知道所有客户端URL，则只需添加为每个客户端添加捆绑URL到捆绑包配置。如果您没有，并且客户端是灵活/动态的，就像我们的情况一样，那么添加一个控制器动作来处理动态主题。

我已经扩展了我们的原始用例，并创建了一种包含主题的更可重用的方式。

此处的演示网站：http://bundletransformer-theme-builder.azurewebsites.net/

GitHub回复：https://github.com/benembery/bundle-transformer-theme-builder

较少的引导主题

1 个答案: