导入配置（Import Options）

优质

小牛编辑

119浏览

2023-12-01

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

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 规则提供了多种拓展，提高了处理外部文件的灵活性。

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

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

语法：

`@import (keyword) "filename"`

keyword 的值有以下几种：

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

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

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

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

@import (reference) "foo.less"

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

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

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

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

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

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

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

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

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

使用 @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;
}

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

@import (optional) "foo.less"

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

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