Twitter bootstrap 无引导：重复@imports

我们使用的是bootstrap v3.3.4

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

在编译为

styles.css

的主

styles.less

文件中，我们只需导入所有依赖项，包括

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

我们的自定义

变量.less

文件导入引导的

变量.less

文件，我们的自定义

混合.less

文件导入引导的

混合.less

文件

---

这意味着在我们的主

样式.less

中，引导的

变量.less

和

混合.less

被导入两次。（一次在

bootstrap/bootstrap.less

中，另一次在我们的自定义

mixin.less

/

变量中。less

）

我们这样做的原因是因为我们有其他单独的

css

文件，我们只在一些页面上包括styles.css，这些文件是从它们自己的

less

文件编译而来的，这些文件既依赖于引导的自定义变量/mixin，也依赖于我们的自定义变量/mixin，这意味着它们需要导入到这些较少的文件中

因此，这样做容易得多：

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

而且不必担心单独导入所有依赖项（引导和我们的），因为我们的版本导入引导版本

如果我们试图消除重复导入，则会出现以下情况：

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

我们不仅需要导入两倍的文件，而且还需要担心顺序，因为引导文件必须放在第一位

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

A）我们这样做会因为重复导入而导致问题吗

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

@import "common.less";

// Your common CSS

@import "common.less"

// Custom CSS per page

没有

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

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

@import "common.less";

// Your common CSS

@import "common.less"

// Custom CSS per page

对。使用CSS预处理器的一种常见方法是让一个文件控制一切，这就是

样式.less

文件。人们的心态应该是对所有商品都有一个单一的规则，找到所有商品，并将它们集合在一起（就进口而言）。因此，如果您要导入两次或更多内容，那么单个文件既不能将它们全部导入，也不能找到所有内容

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

LESS与其他面向对象语言不同，在这些语言中，必须导入特定的头才能使用mixin。只需编译

style.less

（主less文件），它就可以自动进入引导并调用正确的mixin

一些IDE在没有隐式@import的情况下无法处理来自其他文件的混音，因此它不会给您提示，但LESS本身可以处理它，没有问题；这就是它的本意。如果intellisense提示是您所需要的，您可能只需要找到IDE的另一个插件，或者将引导文档放在您的旁边

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

普通。较少

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

@import "common.less";

// Your common CSS

@import "common.less"

// Custom CSS per page

样式。较少

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

@import "common.less";

// Your common CSS

@import "common.less"

// Custom CSS per page

唯一。较少

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

@import "common.less";

// Your common CSS

@import "common.less"

// Custom CSS per page

使用这种方法，只需导入一次内容，不必担心在每个文件中分别管理内容。只需确保，您不会导入任何较少的文件，这些文件实际上在您的

common.LESS

中输出CSS，否则您的CSS文件中会有重复的规则。

A）我们这样做会因为重复导入而导致问题吗？ 首先，答案是否定的。较少的编译器足够聪明，可以关心模块和声明的重复。它能够识别并处理它

B） 即使它不一定会引起问题，这是否违反了任何最佳实践？ 当然，除非导入不处理副作用，如果它们只携带不会以任何方式影响任何其他样式的代码，并且如果编译，将生成一个没有声明的CSS。不通过两次代码生成，而是通过良好的实践和易读性，导入两次充满副作用的代码是不好的

C） 有没有更好的办法？ 是的，您应该知道导入在编译时的工作量更少，并且，当您只编译主文件时，您将能够从外部源访问变量和混合。作为一个例子，让我们以以下内容为例：

调色板。小于：

@defaultColor: navy;
@secondaryColor: black;

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

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

html { ...

车身def.less：

@defaultColor: navy;
@secondaryColor: black;

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

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

html { ...

main.less：

@defaultColor: navy;
@secondaryColor: black;

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

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

html { ...

---

请注意，

body def

不导入

palete

，但它可以像

main一样访问其数据。less

被编译。

“这意味着在我们的main

样式中，less

，…被导入两次。”@seven phases max Yes下面的一个答案为我澄清了这一点。所以现在我只是想知道我的方法是否违反了任何最佳实践，以及是否有更好的方法来做到这一点。好吧，就我个人而言，我不认为B违反了任何“最佳实践”（你在大多数框架中看到的只是一种历史强制的“传统”和“遗产”因为其中一些框架的发展始于石器时代，而更多的年轻框架只是盲目地模仿旧框架的方法）。所以我这样说：“如果您的“…component.less”中的任何一个也应该自己编译成相应的“…component.css”，那么它导入所有必需的导入并没有什么错。。。如果这些组件也作为“一体式”样式表的一部分进行编译，那么复制导入也是可以的（但相反的方法也完全可以，所以确切的选择完全取决于具体的用例）。但是我不想写一个答案，因为这样的B问题在这里很离题（“主要基于观点”）这更像是一篇博文的主题。@se