Webpack @ font-face相对路径问题

我在使用angular2应用程序中的相对路径加载字体时遇到了问题。Webpack @ font-face相对路径问题

在app.ts我有这两个进口

import '../../../public/css/fonts.less'; 
import '../../../public/css/main.less';

的fonts.less我有这样的@ font-face声明内：

@font-face { 
    font-family: 'Montserrat'; 
    src: url('/public/fonts/Montserrat/Montserrat-Regular.eot'); /* IE9 Compat Modes */ 
    src: url('/public/fonts/Montserrat/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('/public/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('/public/fonts/Montserrat/Montserrat-Regular.svg#Montserrat-Regular') format('svg'); /* Legacy iOS */ 
    font-style: normal; 
    font-weight: normal; 
    text-rendering: optimizeLegibility; 
}

这工作得很好。但是，如果我尝试改变相对路径，例如

url('../../fonts/Montserrat/Montserrat-Regular.eot');

我收到此错误：

ERROR in ./~/css-loader!./~/less-loader!./public/css/fonts.less Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/Montserrat/Montserrat-Regular.eot in [...] @ ./~/css-loader!./~/less-loader!./public/css/fonts.less 6:85-138 ERROR in ./public/css/fonts.less Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/Montserrat/Montserrat-Regular.eot in [...]

有人知道可能是问题吗？

P.S.我需要使用相对路径的原因。

来源

2017-02-27 mkolev

-1

在webpack中使用相对路径没有特别的理由。您可以使用webpack aliases来摆脱这种必要性。正确使用别名可以解决很多问题，包括这一个。使用别名

resolve: { 
    alias: { 
    styles: path.resolve(__dirname, 'public/src'), 
    fonts: path.resolve(__dirname, 'public/fonts') 
    } 
}

，然后，导入模块：

import 'styles/fonts.less'; 
import 'styles/main.less';

，并在你的字型：

src: url('fonts/Montserrat/Montserrat-Regular.eot');

我个人倾向于只要指定一个别名为你的CSS和字体目录避免在我的webpack构建的项目中使用相对路径。原因在于它更清洁和可读，它可以防止在相互依赖的不同位置混合相对路径时可能出现的问题。因此，您可以在中心位置定义路径，并让webpack为您解析相对路径。实现此之后

来源

2017-02-28 08:42:05

同样的错误：模块未找到：错误：无法解析“文件”或“目录” ./fonts/Montserrat/Montserrat-Regular.eot在 – mkolev

确保你'path.resolve（__目录名， 'public/fonts'）'解析为您的实际正确路径。这只是一个例子 –

当然:)但这是正确的道路。我仍在研究它。 – mkolev

Webpack @ font-face相对路径问题

回答

相关问题