根据反应条件调用 .LESS

Question

我的网站在 React.JS 上并编译了 less-loader

我尝试确保当我调用我的基本styles.less 文件以在内部设置variables.less 时，因为我将使用多个主题。

只要此人未登录，我就不会有信息的主题。

我需要将带有styles.less 条件的基本文件导入variables.less 的镜头。

我真的不介意这样做。

当我有这样的信息时，我显然可以创建一个 .LESS 文件并将其添加到加载：

import 'common/styles/less/brand/orange.less';

但它迫使我为需要更改颜色、背景等的每个项目重写所有样式......就像这样：

@primaryColor      : #FF6600;
//RESET BLUE COLOR BTN, HOVER, BORDER
a{
  color:@primaryColor;
  &:hover{
    color:darken(@primaryColor,5%);
  }
}

会有这样的解决方案吗？ 在 reactApp.jsx 上：

import styles={default} 'common/styles/less/styles.less';

开启styles.less：

if(styles == 'default'){
  @import "./variables.less";
  elseif (styles == 'oranges'){
    @import "./variables-oranges.less";
  }
}

任何可以避免重写所有 CSS 的建议都将受到欢迎，我完全干了一个优化它的方法。

最好的问候！

Answer 1

我想你可能对这里的 less 有一点误解。 Less 并不意味着根据用户输入生成不同的 CSS 文件。您宁愿预先生成所有组合并根据条件交付 CSS 文件。您可以生成包含主题的完整 CSS 文件，也可以为主题创建一个通用 CSS 文件和其他 CSS 文件。

一种可能的设置如下所示：

• common.less：依赖于变量的通用主题
• orangevars.less：橙色主题的变量定义
• bluevars.less：蓝色主题的变量定义
• orange.less：仅包含对橙色变量和通用主题的导入
• blue.less：这仅包含对蓝色变量和通用主题的导入

编译后你会有：

• orange.css
• blue.css

对于非主题的 CSS 文件，您可以添加包含中性色等的 defaultvars.less。

---

另一种方法：

• base.less：基本（中性）主题
• blue.less：添加在基础之上的蓝色主题
• orange.less：添加在基础之上的橙色主题

它会生成：

• base.css
• blue.css
• orange.css

这里没有任何变量，只有普通的旧 CSS 级联。这样做的好处是，您甚至可以在 JS 启动并加载主题之前交付 base.css。您还可以在扩展 CSS 中自定义主题的完全不同方面。您不仅限于为预定义规则定义变量 - 代价是双重维护和可能重复的代码。

如果您使用任何 3rd 方库（如 bootstrap），也首选此方法。通过在 CSS 级别上进行扩展，您仍然可以在以后更新库而不会丢失您的更改。

---

您可以动态决定（在客户端或服务器上）向客户端交付哪些内容。