相对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中的import base.less。必须相对于module2指定字体目录路径。我不想根据模块更改路径。

Answer 1

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

喜欢这个

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

Answer 2

挖掘了很长一段时间后，我在webpack配置中解决了这个问题！更改webpack.config.js中的以下两个选项，以便满足较少的有关相对URL的编译器并在输出中生成相同的相对URL：

在url配置中禁用选项css-loader。

在relativeUrls配置中明确禁用选项less-loader。

希望这有一天会帮助任何人：D

问候克里斯托弗·>

{
    loader: 'css-loader',
    options: {
        url: false
    }
},
{
    loader: 'less-loader',
    options: {
        relativeUrls: false
    }
}