相对URL无法正常工作

时间:2014-05-20 09:38:28

标签: css3 fonts less

我正在使用.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目录路径。 我不想根据模块改变路径。

2 个答案:

答案 0 :(得分:2)

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

喜欢这个

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

答案 1 :(得分:0)

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

  1. url配置中禁用选项css-loader
  2. relativeUrls配置中明确禁用选项less-loader

希望这有一天对任何人都可以帮助:D

问候克里斯托弗

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