木灵鱼儿

木灵鱼儿

阅读:1436

最后更新:2021/12/21/ 16:16:44

关于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

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 3
文章被阅读 1436

相关文章

目录树