css - 相对 URL 在 .less 中不起作用

Question

我正在使用 .less。我定义了一个将在不同位置使用的基础 .less。

http://<host>/<contextpath>/components/base.less

在这个基本文件中，我想定义一个字体系列。我就是这样做的。

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-b472hj');
    src:url('fonts/icomoon.eot?#iefix-b472hj') format('embedded-opentype'),
        url('fonts/icomoon.woff?-b472hj') format('woff'),
        url('fonts/icomoon.ttf?-b472hj') format('truetype'),
        url('fonts/icomoon.svg?-b472hj#icomoon') format('svg');
    font-weight: normal;
}

字体目录与 base.less 在同一目录中。现在我想在不同模块的两个单独位置使用它。当我使用这个字体系列时，它没有显示。如果我更改 url 并使其相对于一个模块，那么它将在一个模块而不是其他模块中工作。我正在像这样在其他 .less 文件中引用这个基础。

@import '../../components/base.less';

此导入位置将与模块相关。我该如何解决这个问题？我想从存在 base.less 的当前目录中引用字体。但现在它是相对于导入 base.less 的路径。

例如:模块 1

/module1/style.less
module 2
/module2/somedirectory/somedirectory/style.less

如果在 module2 中导入 base.less。必须相对于 module2 指定字体目录路径。我不想根据模块更改路径。

Answer 1

我解决了这个问题。通过在 url 前添加 ~。它将相对于上下文路径加载。

像这样

@font-face {
    font-family: 'icomoon';
    src: ~"url('components/fonts/icomoon.eot?-b472hj')";
    src: ~"url('components/fonts/icomoon.eot?#iefix-b472hj') format('embedded-opentype')",
         ~"url('components/fonts/icomoon.woff?-b472hj') format('woff')",
         ~"url('components/fonts/icomoon.ttf?-b472hj') format('truetype')",
         ~"url('components/fonts/icomoon.svg?-b472hj#icomoon') format('svg')";
    font-weight: normal;
}