Question

上一个小节中我们学习到了如何提取样式并进行导入，但是在某些情况下我们可能需要对导入的样式文件有一些需求，比如标识一个文件的类型。我们就需要对导入文件进行配置（拓展）从而让编译机制可以识别我们的需求。

1. 语法定义

Less offers several extensions to the CSS @import CSS at-rule to provide more flexibility over what you can do with external files. ——官方定义

慕课解释：Less 为 @import 规则提供了多种拓展，提高了处理外部文件的灵活性 。

2. 语法详情

在上一个章节的中，我们了解到 @import 语句默认仅处理拓展名为 .css、.less 的两类文件。

导入配置可以帮助我们修改 @import 默认的行为。

语法：

`@import (keyword) "filename"` 

keyword 的值有以下几种：

• reference : 使用 Less 文件但是不输出它；
• inline : 在输出中包含源文件，但不对其进行处理；
• less : 无论拓展名为什么，都视为 Less 文件；
• css : 无论拓展名为什么，都视为 CSS 文件；
• once : 仅引入一次文件 （默认行为）；
• multiple : 多次引入文件；
• optional : 找不到文件时停止编译。

@import 语句中可以包含多个配置选项，但必须使用 , 分隔开。比如：

@import (optional, reference) "foo.less"

3. 使用场景

导入配置适用于修改 @import 的默认行为，比如引入特定的样式等。

4. reference

使用 @import(reference) 导入外部文件，如果没有使用引用的样式，导入的样式将不会添加到编译输出中。

@import (reference) "foo.less"

5. inline

当 CSS 文件可能不兼容时，我们使用此选项。

因为尽管 Less 已经支持大多数已知的标准 CSS ，但在某些地方它不支持注释，并且不修改 CSS 就不支持所有已知的 CSS hack。

@import (inline) "not-less-compatible.css"

6. less

使用 @import (less) 可以忽略引入文件的拓展名，并将其视为 less 文件。

@import (less) "foo.css"; // 等价于 @import "foo.less"

7. css

同 less 配置选项类似，将文件视为 css 文件。

@import (css) "foo.less";// 等价于 @import "foo.css"

8. once

@import 语句的默认行为。这意味着该文件仅导入一次，该文件的后续导入语句将被忽略。

@import (once) "foo.less";
@import (once) "foo.less"; // 该语句将被忽略

9. multiple

使用 @import (multiple) 可以多次引入名称相同的文件。这是与 @import (once) 行为相反的一个选项。

• 输入代码：

// foo.less
.a {
  color: green;
}
// main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";

• 输出代码：

.a {
  color: green;
}

.a {
  color: green;
}

10. optional

使用 @import (optional) 仅在文件存在时才允许导入。如果没有配置可选关键字 less ，则在导入找不到的文件时会抛出FileError并停止编译。

@import (optional) "foo.less"

11. 小结

本章节我们重点介绍了导入机制的一些配置，这些配置可以在一些特定的场景下修改导入机制的默认行为。

每一个配置选项对应不同的配置行为，在 @import 后的 () 填入相应的配置即可。