CSS 使用 Webpack 和 font-face 加载字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45489897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load fonts with Webpack and font-face
提问by Ebenizer Pinedo
I'm trying to load a font in my CSS file using @font-facebut the font never loads. This is my directory structure.
我正在尝试使用我的 CSS 文件加载字体，@font-face但字体从未加载。这是我的目录结构。
Then in webpack.config.jsI have the loader to get fonts.
然后在webpack.config.js我有加载器来获取字体。
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
"./index.js"
],
output: {
path: __dirname+"/build",
filename: "main.js"
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{ test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ },
{ test: /\.jsx?$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ },
{ test: /\.svg$/, loader: "raw" },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=src/css/[name].[ext]'}
]
}
};
Inside my CSS file I have this:
在我的 CSS 文件中，我有这个：
@font-face {
font-family: 'Darkenstone';
src: url('./Darkenstone.woff') format('woff');
}
body {
background-color: green;
font-size: 24px;
font-family: 'Darkenstone';
}
Finally, I'm calling my CSS file in my index.jswith:
最后，我使用以下命令调用我的 CSS 文件index.js：
import './src/css/master.css';
Everything works but de font never loads.
一切正常，但 de font 永远不会加载。
采纳答案by Ebenizer Pinedo
After trying a lot of stuff the next loader made the work. Instead of file-loader, I used url-loader . You need url-loader installed.
在尝试了很多东西之后，下一个加载器完成了工作。我使用 url-loader 代替了 file-loader 。您需要安装 url-loader。
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
回答by Cat Bakun
With webpack 4 this is what solved the issue for me (diff):
使用 webpack 4，这就是为我解决问题的原因（差异）：
{
test: /\.svg$/,
use: ['svg-loader']
},
{
test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
use: ['file-loader']
}
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: ['url-loader?limit=100000'] }
I had to remove svg-loaderand file-loaderin favor of url-loader
我不得不删除svg-loader并file-loader支持url-loader
My app.scssfile looks like this:
我的app.scss文件看起来像这样：
$fa-font-path: '~font-awesome/fonts';
@import '~font-awesome/scss/font-awesome';
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
And in my app.jsI import the app.scss:
在我的app.js我导入app.scss：
import './app.scss';
So, after the changes, my webpack config looks like this:
因此，更改后，我的 webpack 配置如下所示：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpackConfig = require('./webpack.config');
module.exports = {
entry: {
app: './client/app/app.js'
},
devtool: 'source-map',
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
title: 'Development',
template: 'client/index.html'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: ['url-loader?limit=100000'] }
]
}
};
回答by Esben
Try changing your loader to
尝试将您的装载机更改为
{test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=[name].[ext]'}
and add publicPath: 'build/'to your outputkey.
并添加publicPath: 'build/'到您的output密钥中。
