如何将@font-face与webpack的css-loader一起使用？
我正在尝试导入一些字体(如Roboto)在我的项目中使用的webpack，但他们都不起作用。
我的文件结构如下所示：
+-src---fonts-+-Roboto---Roboto.ttf
| |
| +-fonts.css
|
+-webpack.config.js我的fonts.css文件：
@font-face {
font-family: 'Roboto';
src: url(/Roboto/Roboto.ttf) format('truetype');
}我的webpack.config.js看起来像这样：
//...
loaders: [
{
test: /\.css/,
loaders: [
'style-loader',
`css-loader?${JSON.stringify({
sourceMap: isDebug,
localIdentName: isDebug ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
modules: true,
minimize: !isDebug,
importLoaders: 1
})}`,
'postcss-loader',
],
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader',
},
{
test: /\.(wav|mp3|eot|ttf)$/,
loader: 'file-loader',
},
],
//...当我运行webpack时，没有显示任何错误。但是文本字体没有加载(文本仍然是默认的字体系列，尽管我已经将font-family: 'Roboto'设置为Roboto元素)。
我尝试过的：
- 将
.css文件的url()%s中的路径更改为相对路径:出现错误：
/~/css-loader？{“sourceMap”：true，"localIdentName":namelocalhash:base64:3"，"modules":true，"minimize":false，"importLoaders"：1}!./~/postcss-loader!./fonts/fonts.css找不到模块:错误:无法解析/Users/EnixCoda/projectName/fonts @中的模块'Roboto/Roboto.ttf‘。/~/css-loader？{“sourceMap”：true，"localIdentName":"namelocalhash:base64:3"，"modules":true，"minimize":false，"importLoaders":1}!./~/postcss-loader!./fonts/fonts.css 6:135-163
有人能帮帮我吗？
回答 1
Stack Overflow用户
发布于 2018-07-21 02:58:08
当我之前这么做的时候，你需要将@font-face url指向dist文件夹，或者是webpack输出文件的任何地方，相对于请求它们的dist文件夹中的文件。例如：
dist/
assets/
fonts/
font-file.ttf
css/
style.css
index.html这意味着@font-face路径将是../assets/fonts/font-file.ttf，完全与src目录无关。
https://stackoverflow.com/questions/42490086
复制相似问题
腾讯云开发者
