关于less怎么@import引入谷歌在线字体的方法

fonts.less

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');

.box {
  font-family: "Roboto";
}

如果你再less文件中这么引入，那么一定是会报错的，这个报错要从两方面去理解：

1. 原生@import 语法被less占用
2. less不支持在线css

虽然less官方说如果你使用@import引入一个css文件，是会按照css原生语法去解析它的，但是它并没有说它支持一个在线链接，并且如果你嵌套一css，还是会报错，如：

roboto.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');

fonts.less

@import "./roboto.css";
.box {
  font-family: "Roboto";
}

这样还是会报错的，因为即便你引入的是一个css文件，里面的内容还是会被less解析。

具体为啥没有去深入，可能和less支持@import在任何位置使用有关吧，如果想要支持，我们需要对上面的引入增加一个关键字配置：

roboto.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');

fonts.less

@import (inline) "./roboto.css";
.box {
  font-family: "Roboto";
}

inline表示这个文件被引入，但是不做任何处理。

这样就不会报错了，字体也能被正确引入使用。

具体语法可以参考官方文档：@import