从相同的less文件创建不同的css文件答案

【问题标题】：create different css files from same less files从相同的less文件创建不同的css文件
【发布时间】：2014-06-03 19:13:26
【问题描述】：

我想知道是否有人找到了一种方法，可以从相同的 less 文件创建不同的 CSS 文件。

在我的上下文中，我创建了一个不同的无客户文件。该文件包含一系列变量，其中包含特定颜色的主题设置和其他 CSS 指令。

我还有一个用于默认设置的 less 文件。

这里是 less 文件夹的表示

少文件夹
- 我的less文件夹
  - 所有特定于我的上下文的样式
customer.default.less
cutomer.less

我想从“My less 文件夹”编译两个不同的 css，第一个将在变量中使用 customer.default.less 文件。第二个将使用 customer.less 文件。创建 customer.default.css 和 customer.css。为了让 customer.css 和 customer.default.css 一直同步在一起。

我目前正在使用 webstorm 中的编译器插件。我是否使用了正确的工具？

谢谢

【问题讨论】：

当您询问从同一个 .less 文件生成的不同 CSS 文件时，是什么让它们彼此不同？它只是名称（例如，customer.css、customer.default.css）。或者您是否尝试获取 .less 文件的一部分并仅应用于某些 .css 文件？
@MattSmith 我编辑了问题
要获取使用的任何一个文件，您需要使用@import 将它们导入到您的其他.less 文件中，对吗？编译器应该忽略一个导入并使用另一个，还是？我错过了重点吗？

标签： css less webstorm

【解决方案1】：

如果您使用“控制”Less 文件，您确实可以从一个 Less 文件生成多个 CSS 输出。

例如，这是我们用于网站的主要样式表：

/* main-stylesheet.less */
@maincolor: #ff0000;
@secondarycolor: #00ff00;

body {
  color: @maincolor;
  background-color: @secondarycolor;
}

现在，我们要生成一个辅助样式表（根据您的喜好输出“customer.default.css”或“customer.css”）——我们导入主 Less 并覆盖其变量：

/* secondary-stylesheet.less */
@import "main-stylesheet";

// Override variables from the 'main' stylesheet.
@maincolor: #0000ff;

请注意，我们不在此处定义任何规则或设置任何样式，仅覆盖变量。

以下是输出的 CSS 文件：

/* main */
body {
  color: #ff0000;
  background-color: #00ff00;
}

/* secondary */
body {
  color: #0000ff;
  background-color: #00ff00;
}

这是可能的，因为 Less 使用了lazy loading。

确保禁用文件监视器设置“仅跟踪根文件”；否则我们示例中的主样式表将不会产生任何输出 css。

（另外，我会将两个变量声明块分隔到它们自己的 Less 文件中 - 可能是 theme-variables-default.less 和 theme-variables-override-a.less）

【讨论】：

这太棒了，除了变量导入之外，我从未考虑过导入另一个 Less 样式表。

【解决方案2】：

我认为您可以使用 grunt-contrib-less GruntJS task 在您的 Gruntfile 中使用类似的内容来完成此操作。

less: {
  development: {
    files: {
      "path/to/customer.css": "path/to/customer.less"
      "path/to/customer.default.css": "path/to/customer.default.less"
    }
  },
  production: {
    files: {
      "path/to/customer.css": "path/to/customer.less"
      "path/to/customer.default.css": "path/to/customer.default.less"
    }
  }
}

LESS 不是我的生计，但足够使用 Sass 和 grunt-contrib-sass 任务我认为会存在相同的功能集。

【讨论】：