我正在使用.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目录路径。 我不想根据模块改变路径。
答案 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:
url
配置中禁用选项css-loader
。 relativeUrls
配置中明确禁用选项less-loader
。希望这有一天对任何人都可以帮助:D
问候克里斯托弗
{
loader: 'css-loader',
options: {
url: false
}
},
{
loader: 'less-loader',
options: {
relativeUrls: false
}
}