Question

我正在使用.less。我定义了一个将在不同位置使用的base .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;
}

fonts目录与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指定fonts目录路径。我不想根据模块改变路径。

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

相对URL无法正常工作

2 个答案: