css - 如何将一个 LESS 样式表模块化为多个样式表？

Question

我正在寻找我的 styles.less 文件（目前包含整个网站的 3000 行样式表代码）并将其分解为多个样式表，即 navigation.less、buttons.less、footer.less 等。

我想然后我会将所有这些单独的样式表@import 到一个主样式表中，例如 all.less 它将编译/缩小到 all.css

我将这种样式分解为单独的工作表时遇到的一个问题是变量引用被破坏了。例如，如果我将我的按钮 CSS 移植到buttons.less，我的按钮 CSS 包含对在 styles.less 中定义的 LESS 变量的引用。我该如何解决这个问题？

有没有更好的方法来用 LESS 模块化我的 CSS 代码？对于一个文件，3000 行 LESS 代码变得完全无法管理，我需要将其分解。

Answer 1

大多数人通过拥有两个特定文件来处理这个问题，比如variables.less和mixins.less.

然后，如果模块中需要这些，您可以使用import-once而不是仅使用import(对于当前即将发布的 1.4 之前的版本；此时import 默认情况下将充当import-once)。您在模块文件和all.less. 这样，当它们全部放在all.less文件中时，导入只会在最终文件的顶部发生一次，而不是针对加载的每个单独的模块文件。