Question

我们正在使用bootstrap v3.3.4。

我们的结构将所有bootstrap的LESS源文件保存在一个单独的文件夹中，以便于升级。

在我们编译为styles.less的主styles.css文件中，我们只有@import所有依赖项，包括bootstrap.less。

@import "bootstrap/bootstrap.less"; // bootstrap source
@import "variables.less"; // our custom variables
@import "mixins.less"; // our custom mixins
@import "main.less"; // all of our custom css/less styles

我们的自定义variables.less文件导入bootstrap的variables.less文件，我们的自定义mixins.less文件导入bootstrap的mixins.less文件。

这意味着在我们的主styles.less中，引导程序的variables.less和mixins.less被导入两次。（一次在bootstrap/bootstrap.less，再次在我们的自定义mixins.less / variables.less）

我们这样做的原因是因为我们有其他单独的css文件，我们只在一些页面上包含styles.css，这些文件是从他们自己的less文件编译的这取决于bootstrap的自定义变量/ mixins和我们的自定义变量/ mixins，这意味着它们需要在这些较少的文件中导入。

因此，这样做要容易得多：

@import "variables.less"; // our custom variables that also @import bootstrap's variables
@import "mixins.less"; // our custom variables that also @import bootstrap's variables

并且不必担心分别导入所有依赖项（bootstrap和我们的），因为我们的版本导入了bootstrap版本。

如果我们尝试消除重复的导入，它将如下所示：

@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";
@import "variables.less";
@import "mixins.less";

我们不仅需要导入两倍的文件，而且我们还必须担心订单，因为必须先引导自举文件。

我的问题是A）以我们的方式做它会导致问题，因为重复导入，B）即使它不一定会导致问题，这是否违反任何最佳做法，并且C）是否有更好的方法来解决这个问题？

Answer 1

A）由于重复导入会以我们的方式做到吗？

首先，答案是否定的。 LESS编译器足够聪明，可以关注模块和声明的重复。它能够区分和处理它。

B）即使它不一定会导致问题，这是否违反了任何最佳做法？

当然，除非导入不处理副作用，否则它们只带有不会以任何方式影响任何其他样式的代码，如果编译，则会生成一个CSS空的声明。导入两次充满副作用的代码并不是很好，不是通过两次代码生成，而是通过良好的实践和易读性。

C）有更好的方法来解决这个问题吗？

是的，您应该知道LESS中的导入在编译时工作，当您编译主文件时，您将能够从外部源访问变量和mixins。例如，让我们采取以下措施：

<强> palette.less ：

@defaultColor: navy;
@secondaryColor: black;

<强>体def.less ：

body {
  background-color: @defaultColor;
  border-top: 5px solid @secondaryColor;
}

<强> main.less ：

@import "palette";
@import "body-def";

html { ...

请注意body-def不会导入palette，但只要编译main.less就可以访问其数据。

Answer 2

A）由于重复导入会导致问题

都能跟得上

B）即使它不一定会导致问题，这是否违反任何最佳做法

是。使用CSS预处理器的常用方法是让一个文件控制所有内容，这就是您的styles.less文件。心态应该是将所有规则都统一起来，找到所有规则，并将它们全部汇集在一起（关于进口）。因此，如果您要导入两次或更多次的内容，那么单个文件并不能将它们全部放在一起，也不会找到所有内容。

C）有更好的方法来解决这个问题吗？

LESS不能像其他面向对象的语言一样工作，您必须导入特定的标头才能使用mixin。通过简单地编译styles.less（您的主LESS文件），它将自动进入Bootstrap并调用正确的mixins。

有些IDE无法在没有隐式@import的情况下处理来自其他文件的mixin，所以它不会给你提示，但LESS本身可以处理它没有问题;这实际上就是它的意思。您可能只需要为IDE找到另一个插件，或者如果智能感知提示符合您的需要，可以在您旁边使用Bootstrap文档。

您可以遵循的一种方法是创建一个可在项目中使用的“common.less”文件。例如：

<强> common.less

@import "bootstrap/bootstrap.less"; // bootstrap source
@import "variables.less"; // your custom variables
@import "mixins.less"; // your custom mixins

<强> styles.less

@import "common.less";

// Your common CSS

<强> unique.less

@import "common.less"

// Custom CSS per page

使用这种方法，您只需导入一次，而不必担心在每个文件中单独管理内容。请确保，您不会导入任何实际在common.less中输出CSS的LESS文件，否则您的CSS文件中会有重复的规则。

Bootstrap LESS：重复@imports

2 个答案:

A）由于重复导入会以我们的方式做到吗？

B）即使它不一定会导致问题，这是否违反了任何最佳做法？

C）有更好的方法来解决这个问题吗？